最近学习了 angular 表单。

1. 表单绑定数据，目前有两种方法：

    1. [(ngModel)]="name";  // 双向绑定属性值

    2. formControlNam="name";  // 按名称FormControl将现有FormGroup的a 同步到表单控件元素。

例如：

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()"> <!-- 这里必须写 [formGroup]="form" 绑定下方 new FormGroup()  -->
      <div *ngIf="first.invalid"> Name is too short. </div>
 
      <input formControlName="first" placeholder="First name"> <!-- formControlName 绑定的是下方 new FormGroup() 中 first -->
      <input formControlName="last" placeholder="Last name">
 
      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),  last: new FormControl('Drew'), // 'Nancy' 是 值， validators.minLength(2) 是angular默认表单验证，也可以自定义验证
  });
 
  get first(): any { return this.form.get('first'); } // 必须写 这个方法，之后才可以获取到表单的值
 
  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'} // 获取 值
  }
 
  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); } // 改变 first 与 last 表单的值
}

注：app.module.ts 引入必须 

否者 不可以用 formControlName

注：formControlName 与 ngModel 使用

在Angular v6中不支持将ngModel输入属性和ngModelChange事件与反应式表单指令一起使用，并且将在Angular v7中删除。

现已弃用：

content_copy<form [formGroup]="form"> <input formControlName="first" [(ngModel)]="value"> </form> <!-- 不要一起用了 -->

content_copythis.value = 'some value';

由于一些原因，这已被弃用。首先，开发人员发现这种模式令人困惑。看起来似乎ngModel正在使用实际的指令，但实际上它是ngModel在反应式表单指令上命名的输入/输出属性，它简单地近似（某些）其行为。具体来说，它允许获取/设置值和拦截值事件。然而，ngModel其他一些功能 - 比如延迟更新ngModelOptions或导出指令 - 根本不起作用，这可以理解地引起一些混乱。

此外，这种模式混合了模板驱动和反应形式策略，我们通常不建议这样做，因为它没有利用这两种策略的全部好处。在模板中设置值违反了反应形式背后的模板无关原则，而在类中添加FormControl/ FormGroup层则消除了在模板中定义表单的便利性。