Присвоение ngModel свойству не определено при переходе из @Input

Question

У меня есть компонент со следующим свойством ввода.

@Input() addressAssociation: AccountAssociation;

у которого есть:address: Address;

Внутри Address есть свойство, к которому я хочу привязать stateCode,

В моем шаблоне у меня есть это:

<div class="fcol-md-4 fcol-xs-12 form-group" *ngIf="!zipCodeValidating && addressAssociation.address">
  <label for="{{name}}State" class="uk-label">State / U.S Territory</label>
  <select [(ngModel)]="addressAssociation.address.stateCode" 
    [disabled]="isListedZipCode"
    #addState="ngModel"
    required>
    <option [ngValue]="state.abbreviation" *ngFor="let state of states">{{state.fullName}} ({{state.abbreviation}})</option>
  </select>
</div>

<div class="text--error" *ngIf="addState.errors && addState.touched">
    <span *ngIf="addState.errors.required">State is required.</span>
</div>

Проблема в том, что при загрузке шаблона он всегда выдает ошибку: Cannot read property errors of undefined,

Кроме того, я попытался напечатать переменную с {{addState | json}} но выдает ошибку круговой ссылки. А также, просто пытаясь напечатать addState, и он никогда не менялся даже при выходе из отключенного состояния и изменении его значения.

Дело в том, что, видимо, переменная #addState не заполняется ngModel есть идеи как решить это?

Answer 1

Обновленный ответ:

У вас есть проблема с ограничениями Вы назначаете #addState внутри *ngIf, И тогда вы ссылаетесь addState Вне этого *ngIf, Это не работает - переменная шаблона будет доступна только внутри той же области, в которой она была создана. Попробуйте перенести свой тестовый div внутри *ngIf, Поместите это только под </select>

Старый ответ:

Вы должны использовать оператор безопасной навигации ( https://angular.io/guide/template-syntax)

<div class="text--error" *ngIf="addState?.errors && addState?.touched">
    <span *ngIf="addState?.errors.required">State is required.</span>
</div>

Answer 2

Я считаю, что ваша ошибка исходит из этого кода

<div class="text--error" *ngIf="addState.errors && addState.touched">
    <span *ngIf="addState.errors.required">State is required.</span>
</div>

попробуйте добавить addState к вашему ngIf

*ngIf="addState && addState.errors && addState.touched"

addState не определен при загрузке компонента, поэтому addState.errors выдает эту ошибку