Я ищу вариант использования в реактивных формах angular для фильтрации поля ввода элемента управления динамической формы в FormArray на основе ключа. Я приложил снимок экрана с моей реализацией. В поле поиска мне нужно найти следующие свойства на основе ключи.
FormArray является расширением класса AbstractControl , который предоставляет наблюдаемые значения valueChanges с последними значениями. Все значения, введенные в вашу форму, доступны как POJO в значениях этого потока. Вы можете объединить этот поток со своим запросом и отфильтровать значения, соответствующие вашим критериям. Черт возьми, ваш поисковый запрос может быть в той же FormGroup, что и ваш FormArray с парами ключ-значение.
// ngOnInit for instance
form$.valueChanges.pipe(
map(value => {
// here, filter your key value pairs which meet your criteria and give them back in a way you can build your form in the HTML
})
);
Трудно сопоставить наблюдаемый источник с чем-то, что вы можете использовать в своем шаблоне HTML, чтобы вы все еще могли привязать соответствующий FormControl к вводу. Таким образом, ваш HTML может немного отличаться от стандартного примера FormArray, потому что вы не можете * ngFor напрямую через форму, а через специально созданный поток. Вы по-прежнему можете привязать каждый ввод к соответствующему FormControl, просто выполняя [formControl]="myMethodToGetTheRightControl(blabla)" без использования formArrayName, formGroupName и formControlName.
Так что, может быть, это не так просто, но это можно сделать. Если вы дадите stackblitz своим (частичным) кодом, я смогу разработать свою концепцию, чтобы вы показали, что я имею в виду.
