У меня возникли проблемы с возможностью подписаться на 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);
}
}