angular响应式表单

1. FormGroup用于追踪一个表单控件组的值和状态
2. 由FormControlName指令提供的formControlName属性把输入框和和 FormGroup 中定义的表单控件绑定起来，并且相互通讯
3. 当表单过多时，注入FormBuilder服务更快捷

.html

  

   

      

    

    

      
        {{item.name}}
      
    
 

.ts

  checkForm: FormGroup;
constructor(
    private fb: FormBuilder
    ){}
 ngOnInit() {
    this.checkForm = this.fb.group({
     enable_delete_person: [{
        value: this.step.enable_delete_person,
        disabled: EStepType.Start === this.step.type || EStepType.End === this.step.type
      }],
      person_limit: [{
        value: this.step.person_limit,
        disabled: EStepType.Start === this.step.type || EStepType.End === this.step.type
      }];

对表单赋值
this.checkForm.setValue(this.step);
this.checkForm.personLimit.setValue('-1');

通过订阅valueChanges收到最新值

  this.checkForm.valueChanges.subscribe((newValue) => {
      this.step = newValue;
      this.stepChange.emit(newValue);
    });

动态设置属性disabled or not
this.checkForm.controls.default_handler_role_name.disable();
this.checkForm.controls.default_handler_role_name.enable();