Условная проверка Angular 9 FormArray - проблема с подпиской

У меня возникли проблемы с возможностью подписаться на valueChanges формы, которая использует FormArray внутри FormGroup. По сути, мне нужно знать значение одного ввода, поскольку это меняет правила проверки другого. Ниже приведен пример того, как я успешно реализовал ту же концепцию с группой 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);
  }
}

person ChocolateOrange    schedule 31.07.2020    source источник


Ответы (1)


Эта проблема возникла из-за того, что в моем коде подписка forEach вызывалась после addToMyFormArr(), в отличие от примера кода, который я предоставил в вопросе. Я обновил пример кода, чтобы отразить возникновение проблемы.

person ChocolateOrange    schedule 02.08.2020