angular - 在 formArray 中验证 formGroup 的问题

Question

我正在创建一个带有 Angular Material 垫台的表格。

我在编写我的应用程序时使用了响应式表单，表单启动看起来像这样:

myForm = this.fb.group({
    settings: this.fb.array([])
});

我的表单是一个包含 formArray 控件(设置)的 formGroup。

设置 formArray 包含每个设置的 formGroup(mat-table 中的每一行都是一个 formGroup 并包含多个控件)。

当我尝试向它添加验证时，我的问题就开始了。

如果我只有一个带有 formControl 的 formGroup，并且其中之一是 Validators.required，例如，在我添加一些值之前表单是无效的，然后它会变为有效状态。

然而，当在表单数组中使用 formGroup 时，即使在向 require 字段添加了一些值之后，表单状态仍然无效(我什至控制台记录表单以查看内部值是否已更改并且确实如此)。

此外，当我尝试使用 valueChange().subscribe 捕获更改时...只有当我从 formArray 中推送/删除组时才会触发事件，而不会在设置组内的现有控件发生更改时触发。

我如何监听数组内部组中的内部变化事件，然后对它们使用一些自定义估值？

Answer 1

没有看到更多你的代码......很难猜出哪里出了问题。

但这里是我的一些代码供引用:

组件代码

  get addresses(): FormArray {
    return <FormArray>this.customerForm.get('addresses');
  }

  ngOnInit() {
    this.customerForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.maxLength(50)]],
      addresses: this.fb.array([this.buildAddress()])
    });
  }

  addAddress(): void {
    this.addresses.push(this.buildAddress());
  }

  buildAddress(): FormGroup {
    return this.fb.group({
      addressType: 'home',
      street1: ['', Validators.required],
      street2: '',
      city: '',
      state: '',
      zip: ''
    });
  }

模板

    <div formArrayName="addresses"
         *ngFor="let address of addresses.controls; let i=index">

        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label"
                 attr.for="{{'street1Id' + i}}">Street Address 1</label>
          <div class="col-md-8">
            <input class="form-control"
                   id="{{'street1Id' + i}}"
                   type="text"
                   placeholder="Street address (required)"
                   formControlName="street1"
                   [ngClass]="{'is-invalid': (address.controls.street1.touched || 
                                              address.controls.street1.dirty) && 
                                              !address.controls.street1.valid }">
            <span class="invalid-feedback">
              <span *ngIf="address.controls.street1.errors?.required">
                Please enter your street address.
              </span>
            </span>
          </div>
        </div>
    </div>

您可以在这里找到完整的项目:https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final