Angular Reactive Froms, получая древний вложенный контроль
Я создаю довольно простую вложенную форму.
Группа форм> Массив форм> Группа форм> Элементы управления
В html я пытаюсь добавить кнопку "Удалить", но хочу показывать только тогда, когда последний элемент не является нетронутым или пустым.
Этот переключатель css должен выглядеть примерно так... [class.d-none]="itemName.pristine && itemName == '' && isLast" в зависимости от того, что я могу найти в Google, но получаю ошибку.
Ошибка: TypeError: Cannot read property 'pristine' of undefined
HTML
<div formArrayName="items" *ngFor="let item of wishlistForm.get('items').controls; let i = index; last as isLast;" class="mb-4">
<div class="form-row" [formGroupName]="i">
<input type="text" class="form-control" name="itemName" formControlName="itemName" placeholder="Enter your gift ideas here">
<button type="button" [class.d-none]="itemName.pristine" class="close m-1" aria-label="Close btn-danger" (click)="remove(i)">
<span aria-hidden="true">×</span>
</button>
<input class="form-control" type="hidden" formControlName="itemUrl">
</div>
Т.С.
wishlistForm = this.fb.group({
items: this.fb.array([])
});
createItemFields(name = "", url = "", uid = ""): FormGroup {
return this.fb.group({
itemName: [name],
itemUrl: [url],
itemUid: [uid]
})
}
get items() {
return this.wishlistForm.get('items') as FormArray;
}
addItem(name = "", url = "", uid = "") {
this.items.push(this.createItemFields(name, url, uid));
}
1 ответ
Решаемые.
wishlistForm.get ('') предметы. управления [I].get('ITEMNAME'). нетронутые