兩種表單類型使用方法比較

特性	模板驅動表單	響應式表單
引入模組	FormsModule	ReactiveFormsModule
數據模型定義	在組件類中定義一般對象	使用 FormGroup 和 FormControl
基本語法	[(ngModel)]="property"	[formControl]="control"
表單綁定	<form #f="ngForm">	<form [formGroup]="form">
控件綁定	<input [(ngModel)]="name">	<input formControlName="name">
初始化	profile = { name: '' }	form = new FormGroup({ name: new FormControl('') })
訪問值	profile.name	form.get('name').value
驗證方式	<input required minlength="4">	new FormControl('', [Validators.required, Validators.minLength(4)])
提交處理	<form (ngSubmit)="onSubmit(f)">	<form (ngSubmit)="onSubmit()">
狀態訪問	f.valid, f.touched	form.valid, form.touched

對比示例

基本表單設置

模板驅動：

import { FormsModule } from '@angular/forms';

@Component({
  imports: [FormsModule],
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <input [(ngModel)]="name" name="name">
    </form>
  `
})
export class AppComponent {
  name = '';
}

響應式：

import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name">
    </form>
  `
})
export class AppComponent {
  form = new FormGroup({
    name: new FormControl('')
  });
}

表單驗證

模板驅動：

<input 
  [(ngModel)]="name"
  name="name"
  required
  minlength="4"
  #nameInput="ngModel"
>
<div *ngIf="nameInput.invalid && nameInput.touched">
  錯誤提示
</div>

響應式：

form = new FormGroup({
  name: new FormControl('', [
    Validators.required,
    Validators.minLength(4)
  ])
});

<input formControlName="name">
<div *ngIf="form.get('name').invalid && form.get('name').touched">
  錯誤提示
</div>

表單提交

模板驅動：

onSubmit(form: NgForm) {
  if (form.valid) {
    console.log(this.name);
  }
}

響應式：

onSubmit() {
  if (this.form.valid) {
    console.log(this.form.value);
  }
}