反应式表单：将表单组中的所有控件标记为脏

Question

我有带表单的 Angular 6 应用程序。这是一个例子

export class ExampleComponent implements OnInit {
    form: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.form = new FormGroup({
            first: new FormControl(),
            last: new FormControl()
        });

        this.markControlsAsDirty(this.form);
    }

    markControlsAsDirty(form: FormGroup) {
        this.form.get('first').markAsDirty();
        this.form.get('last').markAsDirty();
    }
}

我不想获得单个控件并标记每个字段。我可以将表单组中的所有控件标记为脏吗？

更新我已经添加了stackblitz 示例来表明之前的两个答案是错误的

Answer 1

要么将整体标记formGroup为脏：

this.form.markAsDirty();

或者标记每个字段：

Object.keys(this.form.controls).forEach(key => {
  this.form.get(key).markAsDirty();
});

Answer 2

如果你有一个复杂的形式结构，可以隔离代码标记FormGroup，FormArray或FormControl为脏。请参阅此处的示例：将表单标记为脏

markDirty() {
this.markGroupDirty(this.form);
console.log('FORM:', this.form);}
markGroupDirty(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(key => {
  switch (formGroup.get(key).constructor.name) {
    case "FormGroup":
      this.markGroupDirty(formGroup.get(key) as FormGroup);
      break;
    case "FormArray":
      this.markArrayDirty(formGroup.get(key) as FormArray);
      break;
    case "FormControl":
      this.markControlDirty(formGroup.get(key) as FormControl);
      break;
  }
});
}
markArrayDirty(formArray: FormArray) {
formArray.controls.forEach(control => {
  switch (control.constructor.name) {
    case "FormGroup":
      this.markGroupDirty(control as FormGroup);
      break;
    case "FormArray":
      this.markArrayDirty(control as FormArray);
      break;
    case "FormControl":
      this.markControlDirty(control as FormControl);
      break;
  }
 });
}
markControlDirty(formControl: FormControl) {
     formControl.markAsDirty();
}

Answer 3

Sachin Gupta 解决方案的简化版本：

public static markAllControlsAsDirty(abstractControls: AbstractControl[]): void {
    abstractControls.forEach(abstractControl => {
      if (abstractControl instanceof FormControl) {
        (abstractControl as FormControl).markAsDirty({onlySelf: true});
      } else if (abstractControl instanceof FormGroup) {
        this.markAllControlsAsDirty(Object.values((abstractControl as FormGroup).controls));
      } else if (abstractControl instanceof FormArray) {
        this.markAllControlsAsDirty((abstractControl as FormArray).controls);
      }
    });
  }

并像这样使用它：

FormUtils.markAllControlsAsDirty(Object.values(this.form.controls));