(十六)、Angular4.0 响应式表单

一、在demo4项目中新建reactiveForm组件

ng g component reactiveForm

二、3种api

  // FromControl 相当于一个普通对象
  username: FormControl = new FormControl('aaa');

  // FormGroup 存放key:value形式的数据
  formModel: FormGroup = new FormGroup({
    from: new FormControl(),
    to: new FormControl()
  });

  // FormArray 相当于数组
  emails: FormArray = new FormArray([
    new FormControl('a@a.com'),
    new FormControl('b@b.com'),
  ]);

三、reactive-form.component.ts

• 定义一个FormGroup(java中的Map)，用来接收表单的所有数据
  

  formModel: FormGroup = new FormGroup({
    dateRange: new FormGroup({
      from: new FormControl(),
      to: new FormControl()
    }),
    emails: new FormArray([
      new FormControl('a@a.com'),
      new FormControl('b@b.com')
    ])
  });

• addEmail()往数组里面添加一个空的FormControl

  addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());
  }

• onSubmit()提交表单触发的方法，把表单数据打印到控制台
  

  onSubmit() {
    console.log(this.formModel.value);
  }

四、reactive-form.component.html (对应reactive-form.component.ts自行参悟)

• 用到了formGroupName、formConrolName、formArrayName关键字，相当于数据的双向绑定，对应绑定FormGroup、FormControl、FormArray

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div formGroupName="dateRange">
    起始日期:<input type="date" formGroupName="from">
    截止日期:<input type="date" formGroupName="to">
  </div>
  <div>
    <ul formArrayName="emails">
      <li *ngFor="let e of formModel.get('emails').controls; let i = index;">
        <input type="text" [formControlName]="i">
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加Email</button>
  </div>
  <div>
    <button type="submit">保存</button>
  </div>
</form>

五、app.component.html中使用reactiveForm组件

<app-reactive-form></app-reactive-form>

六、启动项目，访问测试localhost:4200 

七、表单重构

八、新建reactiveRegist组件

ng g component reactiveRegist

九、reactive-regist.component.ts中编写表单注册的数据结构

  formModel: FormGroup;

  constructor() {
    this.formModel = new FormGroup({
      username: new FormControl(),
      mobile  : new FormControl(),
      passwordsGroup: new FormGroup({
        password: new FormControl(),
        pConfirm: new FormControl()
      })
    });
  }

  onSubmit() {
    console.log(this.formModel.value);
  }

十、reactive-regist.component.html

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input type="text" formControlName="username"></div>
  <div>手机号：<input type="text" formControlName="mobile"></div>
  <div formGroupName="passwordsGroup">
    <div>密码：<input type="password" formControlName="password"></div>
    <div>确认密码：<input type="password" formControlName="pConfirm"></div>
  </div>
  <button type="submit">提交</button>
</form>

十一、template-form.component.html展示reactive-regist组件，启动项目，访问测试localhost:4200 

十二、用FormBuilder来简化reactive-regist.component.ts中的数据结构

• fb.group({})替代new FormGroup，并且可以额外传多一个参数fb.group({},校验group)
• ['',校验control,异步校验control] 替代new FormControl

  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      username: [''],
      mobile  : [''],
      passwordsGroup: fb.group({
        password: [''],
        pConfirm: ['']
      })
    });
  }

十三、启动项目，访问测试localhost:4200