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 example，以表明先前的两个答案是错误的

Answer 1

将整个formGroup标记为脏：

this.form.markAsDirty();

或标记每个字段：

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

Answer 2

最佳方法：

这会使每个控件变脏： this.form.markAsDirty（）;

使用这种方式（第二个选项）：

let controls = this.form.controls;

    controls.forEach(control => {
          this.form.get(control).markAsDirty();
        });

Answer 3

如果表单结构复杂，则可以隔离代码以将FormGroup，FormArray或FormControl标记为脏。请参阅此处的示例：Mark Form as dirty

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 4

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));

Answer 5

在FormGroup中标记为脏控件（仅包含值的控件）

markDirtyAllControlsWithValue(form: FormGroup): void {
  const recursiveFunc = (formGroup: FormGroup) => {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control.value !== null && control.value !== undefined && control.value !== '') {
        control.markAsDirty();
      }
      if (control instanceof FormGroup) {
        recursiveFunc(control);
      }
    });
  };
  recursiveFunc(form);
}

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

5 个答案: