Angular Reactive Froms, получая древний вложенный контроль

Question

Я создаю довольно простую вложенную форму.

Группа форм> Массив форм> Группа форм> Элементы управления

В 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));
}

Answer 1

решаемая.

wishlistForm.get ('items'). Control [i] .get ('itemName'). Pristine