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('[email protected]'),
  new FormControl('[email protected]')
])

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

image.png

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

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

 

  起始日期
  截止日期


  

    

      
    
  
  增加Email


  保存

表单.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()
   })
 }) ;

 

    起始日期
    截止日期
  

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

三、formControlName的值也是一个字符串,用在formGroupName指令内
四、formAarryName
必须用在

步骤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')
    ])
  }) ;

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

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

    
 
      

        
      
    
    增加Email

    保存
  

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

五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('[email protected]'),
    new FormControl('[email protected]')
  ]);*/


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

}

 
 
 

  

    起始日期
    截止日期
  
  

    
 
      

        
      
    
    增加Email

    保存
  

image.png

image.png

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