angular学习之两种类型的表单-猿码集

1. 前言

Angular是一款流行的前端框架，它的表单模块提供了两种类型的表单：模板驱动表单和响应式表单。这两种类型的表单各有优缺点，本文将介绍它们的使用方法和特点，以帮助您选择适合自己项目的类型。

2. 模板驱动表单

2.1 表单结构

模板驱动表单的结构与HTML表单非常相似，它可以直接绑定到HTML元素上：


<form #form="ngForm">
  <label>Name:</label>
  <input name="name" [(ngModel)]="name" required>
  <button type="submit">Submit</button>
</form>

这里，我们使用ngModel指令双向绑定了name变量，同时使用required属性实现了表单验证。

2.2 表单验证

模板驱动表单的验证非常便利，只需要在表单元素上添加验证器指令即可：


<form #form="ngForm">
  <label>Email:</label>
  <input type="email" name="email" ngModel email required>
  <label>Password:</label>
  <input type="password" name="password" ngModel minlength="6" required>
  <button type="submit">Submit</button>
</form>

这里，我们使用了email和minlength指令实现了邮箱格式和密码长度的验证。

2.3 表单提交

模板驱动表单的提交非常简单，只需要在表单元素上使用ngForm指令，并引用submit函数即可：


<form #form="ngForm" (ngSubmit)="submit(form.value)">
  <label>Name:</label>
  <input name="name" [(ngModel)]="name" required>
  <button type="submit">Submit</button>
</form>

在上面的例子中，我们定义了一个submit函数，它接受表单数据作为参数。当表单提交时，这个函数将会被调用。

3. 响应式表单

3.1 表单结构

响应式表单与模板驱动表单的结构略有不同，它需要使用专门的FormGroup和FormControl类进行初始化：


export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit(): void {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }
}

在上面的例子中，我们使用FormBuilder依次初始化了表单中的name、email和password三个控件，并分别绑定了相应的验证器。

3.2 表单验证

响应式表单的验证同样非常方便，我们只需要在FormControl中添加相应的验证器即可：


ngOnInit(): void {
  this.form = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]],
  });
}
get name() { return this.form.get('name'); }
get email() { return this.form.get('email'); }
get password() { return this.form.get('password'); }

在上面的例子中，我们使用了get函数获取表单中的相应控件，并进行验证。

3.3 表单提交

响应式表单的提交同样需要在表单元素上使用FormGroup指令，并在submit函数中获取表单数据：


<form [formGroup]="form" (ngSubmit)="submit(form.value)">
  <label formControlName="name">Name:</label>
  <input formControlName="name">
  <label formControlName="email">Email:</label>
  <input formControlName="email" type="email">
  <label formControlName="password">Password:</label>
  <input formControlName="password" type="password">
  <button type="submit">Submit</button>
</form>
submit(data) {
  console.log(data);
}

在上面的例子中，我们使用了formControlName指令访问表单中的控件，并定义了submit函数来输出表单数据。

4. 总结

本文介绍了Angular的两种类型的表单：模板驱动表单和响应式表单。它们虽然使用方法不同，但都有各自的优点和适用场景。在选择表单类型时，我们应该根据项目的需求和开发经验进行选择。希望这篇文章能帮助您更好地了解Angular表单模块的特点和使用方法。

angular学习之两种类型的表单