Angular表单【响应式表单】

响应式表单：使用TypeScript创建底层模型，运用特定的指令将模版和底层ts数据模型绑定。

【1】使用TypeScript创建底层数据模型：

（1）简述数据模型：数据模型是指用来保存表单数据的数据结构，简称模型。他由定义在angular中FormsModule模块中的三个类组成，分别是：

##1.FormControl:它是一个为单个表单控件提供支持的类，可用于跟踪控件的值和验证状态，此外还提供了一系列公共API。

private nickname=new FormControl('tom');

##2.FormGroup:包含是一组 FormControl 实例，可用于跟踪 FormControl 组的值和验证状态，此外也提供了一系列公共API。

 private passwordInfo=new FormGroup({
    password:new FormControl(),
    confirmPassword:new FormControl()
  });

##3.FormArray:通常代表一个可以增长的字段集合

private emails=new FormArray([
    new FormControl('a@a.com'),
    new FormControl('b@b.com'),
  ]);

（2）创建数据模型：

方法1：

//创建数据模型
  private formModel:FormGroup;//代表整个表单所有的数据
  constructor() {
    this.formModel=new FormGroup({
      nickname:new FormControl(),
      mobile:new FormControl(),
      passwordInfo:new FormGroup({
        password:new FormControl(),
        confirmPassword:new FormControl(),
      }),
      emails:new FormArray([
        new FormControl(),
      ]),
  });
   }

方法2：使用fromBulider来配置表单数据，简化定义表单数据语法

 private formModel:FormGroup;//代表整个表单所有的数据
 private fb:FormBuilder=new FormBuilder();
 constructor() {
//使用fromBulider来配置表单数据
  this.formModel=this.fb.group({
    nickname:[''],
    mobile:[''],
    passwordInfo:this.fb.group({
      password:[''],
      confirmPassword:[''],
    }),
    emails:this.fb.array([
      [''],
    ]),
  
   });
  }

【2】模板与数据模型交互

类名	指令
FormGroup	formGroup-【属性绑定指令】          formGroupName -【属性名指令】
FormControl	formControl-【属性绑定指令】        formControlName -【属性名指令】
FormArray	formArrayName  -【属性名指令】

属性绑定指令，需要指到后台控制器声明的属性上  [formGroup]="formModel"，绑定的formModel是变量

属性名指令，直接将name的值作为其值  如：formControlName="nickname"，绑定的是固定值nickname

接下来代码模板绑定：

<form [formGroup]="formModel" (submit)="createUser()" >
<div>昵称：<input type="text" formControlName="nickname"/> </div>
<div>手机：<input type="text" formControlName="mobile"/> </div>
<div formGroupName="passwordInfo">
    <div>密码<input type="text" formControlName="password"/> </div>
    <div>确认密码<input type="text" formControlName="confirmPassword"/> </div>
</div>
<div>
  邮箱：<ul formArrayName="emails">
          <li *ngFor="let email of formModel.get('emails').controls;let i=index ">
            <input [formControlName]="i" />
            <!-- 是因为email的数组中没有key，需要指定变量，这就需要属性绑定语法 -->
          </li>
       </ul>
       <button type="button" (click)="addEmail()" >添加邮箱地址</button>
</div>
<input type="submit" value="提交" />
</form>

后台实现动态添加邮箱

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

提交数据：

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