angular2表单 常用

动态表单

1、表单验证

在表单提交时，进行手动判断每一项的验证

submit(){
　　for (const i in this.validateForm.controls) { 
　　　　this.validateForm.controls[i].markAsDirty();
　　　　this.validateForm.controls[i].updateValueAndValidity(); 
　　}
　　// this.validateForm.valid 表单是否通过验证
　　if(this.validateForm.valid){
　　　　// 执行提交
　　}else {
　　　　// 提示
　　}
}

2、表单关联绑定（valueChange），取消绑定

// 绑定
const vc = this.addForm.controls.psid.valueChanges.subscribe(val => {
      // 执行事件
    });

// 取消绑定
vc.unsubscribe();

3、表单重新定义验证

// 每项重置完后都需要执行updateValueAndValidity()，更新controls，才能生效

// 设置为必填项
this.addForm.controls.fuelName.setValidators([Validators.required])；
this.addForm.controls.fuelName.updateValueAndValidity();

// 设置为无验证
this.addForm.controls.fuelName.setValidators(null)；
this.addForm.controls.fuelName.updateValueAndValidity();

4、表单设置禁用

// 通常写法
this.psForm = this.fb.group({
    psName: ['', []],
    psCode: ['', []]
})

// 需要禁用的写法
this.psForm = this.fb.group({
    psName: [{value: '', disabled: true}, []],
    psCode: [{value: '', disabled: true}, []]
});

// 通常获取表单value对象
const valObj = this.psForm.value;

// 禁用后获取表单value对象
const valObj = this.psForm.getRawValue();

5、表单重新定义是否禁用

this.psForm.controls[key].reset({value: '123', disabled: true});

 6、表单提交触发验证时，会自动触发表单的valueChanges事件，解决方法：

 Object.keys(this.addForm.controls).forEach(key => {
              this.addForm.controls[key].markAsDirty();
              this.addForm.controls[key].updateValueAndValidity({
                emitEvent: false // 此项配置为true或默认不传，会默认触发表单项的valueChanges事件，若为false，则不触发
              });
            });

 7、使用 this.addForm.value 获取不到禁用的表单项，

可以通过表单的 getRowValue() 方法获取全部表单项