面试题：Angular模板驱动表单重置的基本方法

Question

在Angular的模板驱动表单中，如何实现表单的重置操作？请描述具体步骤，并给出一个简单示例代码。

Answer 1

具体步骤

1. 在模板中定义表单，并为表单元素绑定相应的ngModel和name属性。
2. 获取表单的引用，可以通过在<form>标签上使用#formName="ngForm"的方式。
3. 在需要重置表单的地方，比如按钮的点击事件中，调用表单引用的reset()方法。

示例代码

<form #myForm="ngForm">
  <input type="text" name="username" [(ngModel)]="user.username" required>
  <input type="password" name="password" [(ngModel)]="user.password" required>
  <button type="button" (click)="myForm.reset()">重置表单</button>
</form>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    username: '',
    password: ''
  };
}