@ Inputから来るとき、ngModelをプロパティに割り当てることは未定義です

Question

次の入力プロパティを持つコンポーネントがあります。住所インサイド address: Address;

は私がstateCodeである、にバインドするプロパティがあります：あり

@Input() addressAssociation: AccountAssociation;

。私のテンプレートで

私はこれを持っている：

<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.errorsは、そのエラー

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にこのコードから来ていると信じて

更新の回答：

スコープの問題があります。 *ngIfの中に#addStateを割り当てています。そして、*ngIfの外にaddStateを参照しています。これは機能しません。テンプレート変数は、作成されたスコープ内でのみ使用できます。その中のエラーテスト部門を移動してみてください。*ngIfただ</select>

の下にそれを置く旧答え：

あなたは安全なナビゲーション演算子（https://angular.io/guide/template-syntax#safe-navigation-operator）

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