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

Question

我有以下问题:在我的应用程序中，我有一个巨大的表单，其中包含嵌套的表单构建器，它工作得很好，但是当用户提交表单时，我想将完整表单标记为已触摸(以运行验证)，代码是

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