3.响应式表单

如何创建一个数据模型，有定义在ngForms模块中三个类组成，FormControl,FormGroup,FormArray。
一.FromControl:构成表单的基本单位，代表input元素，可以代表日历，下拉选择框，保存着元素当前的值，校验状态，是否修改过
演示：如何创建FromControl?

表单.ts

 userName: FormControl = new FormControl('AAA'); /* 接收一个参数，代表输入框的初始值，naModel会为附着的元素input创建FormContrl*/

二、FormGroup：可以代表表单一部分，也可以用与代表整个表单，是多个Formcontrol的集合。
一个Formcontrol是无效的，那个FormGroup也是无效的。日期范围字段。
演示;如何创建FormGroup?

formModel: FormGroup = new FormGroup({  // 创建的formGroup
    form: new FormControl(), // 日期范围
    to: new FormControl()
  })

三、FormArray：FormGroup类似，有一个长度属性。代表可以增长的字段集合。，有email，多个邮箱，可以用这个输入任意一个。

emails: FormArray = new FormArray([  /*与FormGroup的formContrl不同的是，没有key,托序号来访问,第一个序号就是0，，*/
  new FormControl('aa@df.com'),
  new FormControl('BB@DD.COM')
])

介绍下指令
响应式表单指令与模板指令完全不同，来自于
ReactiveFormComponent

image.png

注意：1.指令是form开头，ng开头的是模板式表单；2.响应式form指令不可引用 #myForm="myform" .操作数据模型只能在代码中操作，模板指令是在代码中操作。
模板表单变响应式，通常用formGroup代表整个表单。

一.表单.html（formGroup代表整个表单）

<form [formGroup]="forModel" (submit)="onSubmit()"> <!--表单处理方式变成了响应式-->
<div>
  起始日期<input type="date">
  截止日期<input type="date">
</div>
<div>
  <ul>
    <li>
      <input type="text">
    </li>
  </ul>
  <button type="button">增加Email</button>
</div>
<div>
  <button type="submit">保存</button>
</div>
</form>

表单.ts

forModel: FormGroup = new FormGroup({}）/*表示整个表单的数据*/
onSubmit() {
    console.log(this.forModel.value);
 }

二.formGroupName链接一个group：加数据

forModel: FormGroup = new FormGroup({  // 创建的formGroup
   dateRange: new FormGroup({
      form: new FormControl(), // 日期范围
       to: new FormControl()
   })
 }) ;

 <div formGroupName="dateRange">
    起始日期<input type="date" formControlName="from">
    截止日期<input type="date" formControlName="to">
  </div>

效果：能把日期控件的值保存。（[formGroup]="forModel"是后台的属性，formGroupName的值是一个字符串）

三、formControlName的值也是一个字符串,用在formGroupName指令内
四、formAarryName
必须用在<form 的formGroup之内。
步骤1：将模板的ul和控制器的emails的formAarry里的formControl绑定了

formModel: FormGroup = new FormGroup({  // 创建的formGroup
    dateRange: new FormGroup({
       form: new FormControl(), // 日期范围
        to: new FormControl()
    }),
    emails: new FormArray([/*只有顺序号，和ngFor一起使用*/
      new FormControl('aa.com'),
      new FormControl('bb.com')
    ])
  }) ;

<ul formArrayName="emails"> <!--和ts绑定--><!--this.formModel.get('emails').controls  控制器i的emai集合-->
      <li *ngFor="let e of  this.formModel.get('emails').controls; let i=index;"><!--需要当前循环下标-->
        <input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
      </li>
    </ul>

步骤2：点击按钮向eamils数组添加元素，添加输入框

addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    /*添加一个邮箱输入框，需要拿到FormAarry，*/
    emails.push(new FormControl()); /*模板根据数组循环，数组多一个元素，多一个输入框*/
 }

<div>
    <ul formArrayName="emails"> <!--和ts绑定--><!--this.formModel.get('emails').controls  控制器i的emai集合-->
      <li *ngFor="let e of  this.formModel.get('emails').controls; let i=index;"><!--需要当前循环下标-->
        <input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加Email</button>

    <button type="submit">保存</button>
  </div>

效果：就增加了邮箱输入框，保存成功

五formControl
只能用在form外部

image.png
image.png
image.png

export class ReactiveFormComponent implements OnInit {

  formModel: FormGroup = new FormGroup({  // 创建的formGroup
    userName: new FormControl('aaa'),
    dateRange: new FormGroup({
       form: new FormControl(), // 日期范围
        to: new FormControl()
    }),
    emails: new FormArray([/*只有顺序号，和ngFor一起使用*/
      new FormControl('aa.com'),
      new FormControl('bb.com')
    ])
  }) ;

  /*emails: FormArray = new FormArray([  /!*与FormGroup的formContrl不同的是，没有key,托序号来访问,第一个序号就是0，，*!/
    new FormControl('aa@df.com'),
    new FormControl('BB@DD.COM')
  ]);*/


  constructor() { }
 onSubmit() {
    console.log(this.formModel.value);
 }
 addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    /*添加一个邮箱输入框，需要拿到FormAarry，*/
    emails.push(new FormControl()); /*模板根据数组循环，数组多一个元素，多一个输入框*/
 }
  ngOnInit() {
  }

}

<form [formGroup]="formModel" (submit)="onSubmit()"> <!--表单处理方式变成了响应式-->
 
 <input formControlName="userName">

  <div formGroupName="dateRange">
    起始日期<input type="date" formControlName="from">
    截止日期<input type="date" formControlName="to">
  </div>
  <div>
    <ul formArrayName="emails"> <!--和ts绑定--><!--this.formModel.get('emails').controls  控制器i的emai集合-->
      <li *ngFor="let e of  this.formModel.get('emails').controls; let i=index;"><!--需要当前循环下标-->
        <input type="text" [formControlName]="i"><!--和循环下标绑定子一起-->
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加Email</button>

    <button type="submit">保存</button>
  </div>
</form>

image.png
image.png

注意：所有指令都是以form开头的。以name结尾，不需要使用【】，只需要指定名字；只能用在【formGroup】指令之内。
不以name结尾则用【】。