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">&times;</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'). нетронутые

Другие вопросы по тегам