Angular 2 - 将嵌套的表单构建器标记为已触及

Question

我有以下问题：在我的应用程序中，我有一个巨大的表单，其中嵌套了 formbuilder，它工作得很好，但当用户提交表单时，我想将完整表单标记为 Touched（运行验证），代码是

constructor(private fb: FormBuilder) {
    this.form= fb.group({
        field1: [null],
        field2: [null],
        nestedForm1: fb.group({
            field3: [null, Validators.required],
            field4: [null]
        }),
        nestedForm2: fb.group({
            field5: [null, Validators.required],
            field6: [null, Validators.required]
        })
    });
}

当我运行:

this.form.markAsTouched();

只有 Field1 和 Field2 被标记了，有没有我想做的方法？

Answer 1

您可以创建如下自定义方法：

 setAsTouched(group: FormGroup | FormArray) {
  group.markAsTouched()
  for (let i in group.controls) {
    if (group.controls[i] instanceof FormControl) {
      group.controls[i].markAsTouched();
    } else {
      this.setAsTouched(group.controls[i]);
    }
   }
 }

Angular 2 - 将嵌套的表单构建器标记为已触及

Angular 2 - Mark nested formbuilder as Touched

forms

nested

formbuilder

angular2-forms