Angular 9 FormArray 条件验证 - 订阅问题答案

【问题标题】：Angular 9 FormArray Conditional Validation - subscribe issueAngular 9 FormArray 条件验证 - 订阅问题
【发布时间】：2020-11-21 17:58:31
【问题描述】：

我无法订阅在 FormGroup 中使用 FormArray 的表单的 valueChanges。本质上，我需要知道一个输入的值，因为它会改变另一个输入的验证规则。下面是我如何使用 FormBuilder 组成功实现相同概念的示例：

  myForm = this.fb.group({
    myFirstField: ['', Validators.required],
    mySecondField: ['']
  });

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit(): void {
    this.myForm.get('myFirstField').valueChanges.subscribe(myFirstFieldVal => {
      if (myFirstFieldVal === 'something') {
        this.myForm.controls.mySecondField.setValidators([Validators.required]);
      } else {
        this.myForm.controls.mySecondField.clearValidators();
      }
      this.myForm.controls.mySecondField.updateValueAndValidity();
    });
  }

下面是我尝试对 FormArray 使用相同的概念。表单本身在模板中工作，输出数据和提交等，但我需要在每个数组中添加一些条件验证。下面没有做的伎俩。有什么想法可以订阅每个组中某些字段的 valueChanges 吗？

import { Component, OnInit, Input } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';

export interface ExampleGroup {
  myFirstField: string;
  mySecondField: string;
}
export class ExampleFormComponent implements OnInit {
  dataSource = new BehaviorSubject < AbstractControl[] > ([]);
  myFormArr: FormArray = this.fb.array([]);
  myFormGroups: FormGroup = this.fb.group({
    exampleGroups: this.myFormArr
  });
  exampleData = [{
    myFirstField: 'something',
    mySecondField: 'something else',
  }, {
    myFirstField: 'blah',
    mySecondField: '',
  }, ];
  constructor(private fb: FormBuilder, ) {}
  ngOnInit(): void {
    // doesn't work
    this.myFormArr.controls.forEach((control, index) => {
      control.get('myFirstField').valueChanges.subscribe(myFirstFieldVal => {
          console.log(control); // doesn't even get to here
        if (myFirstFieldVal === 'something') {
          this.myFormArr.controls.mySecondField.setValidators([Validators.required]);
        } else {
          this.myFormArr.controls.mySecondField.clearValidators();
        }
        this.myForm.controls.mySecondField.updateValueAndValidity();
      });
    });
    this.exampleData.forEach((d: ExampleGroup) => this.addToMyFormArr(d, false));
  }
  addToMyFormArr(d ? : ExampleGroup) {
    const groupToAdd = this.fb.group({
      myFirstField: [
        d && d.myFirstField ? d.myFirstField : '',
        Validators.required, []
      ],
      mySecondField: [d && d.mySecondField ? d.mySecondField : '', []],
    });
    this.myFormArr.push(groupToAdd);
  }
}

【问题讨论】：

标签： angular validation reactive formarray angular-formbuilder

【解决方案1】：

之所以出现此问题，是因为在我的代码中，forEach 订阅是在 addToMyFormArr() 之后调用的，这与我在问题中提供的代码示例不同。我已经更新了代码示例以反映问题是如何发生的。

【讨论】：