在提交时验证子组件

Question

我一直在互联网上寻找答案。

我正在使用 Angular 10 和反应形式。

这是我的问题：点击提交按钮会在按钮级别触发我的表单的有效性，但不会在子组件级别触发

这里是StackBlitz

如果您在此示例中按“保存”，您将看到只有第一个输入触发验证并变为红色，而另一个需要手动单击。我有一个带有 2 个控件的 formGroup，1 个是 FormControl，另一个是 FormArray。我将主要的formGroup 传递给子组件，并在formArray 内推入1 个formGroup，这个formGroup 有一个formControl。所以基本上我在叶子上有两个FormControl。请告诉我这是否没有意义。

因此，我希望检查所有元素的有效性，无论它是否在子组件内。

Answer 1

您可以像这样在viewProviders 中使用ControlContainer：

control-container.ts

import { Provider, SkipSelf } from '@angular/core';
import { ControlContainer } from '@angular/forms';

export function controlProviderFactory(container: ControlContainer) {
  return container;
}

export const CONTROL_CONTAINER: Provider = {
  provide: ControlContainer,
  useFactory: controlProviderFactory,
  deps: [[new SkipSelf(), ControlContainer]],
};

child.component.ts

import { Component, OnInit, Input } from "@angular/core";
import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";
import { CONTROL_CONTAINER } from "../control-container";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"],
  viewProviders: [CONTROL_CONTAINER]
})
export class ChildComponent implements OnInit {
  @Input() public form: FormGroup;

  constructor() {}
  ngOnInit() {}
}

child.component.html

<ng-container formArrayName="subForm">
    <mat-input-container [formGroupName]="0">
    <mat-form-field>
          <input matInput formControlName="subControl">
    </mat-form-field>
    </mat-input-container>
</ng-container>

并在AppComponent的构造函数中初始化：

  constructor (private formBuilder: FormBuilder) {
    this.fg = this.formBuilder.group({
      name: [null, Validators.required],
      subForm: this.formBuilder.array([])
    });

    const control = <FormArray>this.fg.controls['subForm'];

    control.push(this.formBuilder.group({
      subControl: ['', Validators.required]
    }));
  }

有一个错误“当在 FormArray 中添加字段时，提交时不显示 mat-error”。在 GitHub here 上有描述。

基于您的代码的工作示例，您可以找到 here。

Answer 2

Angular 没有自动验证所有表单控件和子表单控件的机制，该任务留给开发人员：

  save() {
    this.validateAllFormFields(this.fg);
  }
  ngOnInit() {
    this.fg = new FormGroup({
      name: new FormControl(
        { value: "", disabled: false },
        Validators.required
      ),
      sub: new FormArray([])
    });
  }

  validateAllFormFields(formGroup: FormGroup | FormArray) {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup || control instanceof FormArray) {
        this.validateAllFormFields(control);
      }
    });
  }

• demo link
• article with more explanation

Answer 3

对于诉讼案例，假设您有带有子小部件场景的仪表板

1. 这个NGX-Sub-Form 可以很好地作为一个交钥匙工程，我喜欢这种方法，因为它只需扩展 4 个类/选项之一就可以打破a second/level sub form 的复杂性

---

1. 推荐角approach of parent child interaction

下面的例子 borrowed 来自 penley chan

@Directive({
selector: '[provide-parent-form]',
providers: [
    {
        provide: ControlContainer,
        useFactory: function (form: NgForm) {
            return form;
        },
        deps: [NgForm]
    }
  ]
})
export class ProvideParentForm {}

用法：在你的组件根元素之前，你有 [(ngModel)] 添加指令。示例：

<div provide-parent-form> 
   <input name="myInput" [(ngModel)]="myInput"> 
</div>

现在，如果您在控制台中输出表单对象，或者您可以在表单对象的控件属性下看到组件的控件。