によって引き起こされる：定義されていないのプロパティ 'firstname'を読み取ることができません

Question

私はコンポーネントとhtmlファイルを作成しました。コンポーネントIでは、1つのモデルとコンボボックスの値を定義しました。 HTMLファイルでは、これらのモデル値をテキストボックスとコンボボックスにバインドしようとしています。 私はアプリケーションコントロールを実行したときに正しく表示されましたが、コンボボックスには値がなく、モデルに未定義が表示されていました。 下記のコードをご確認ください。

component.ts：

export class Testpagesearchcomponent implements OnInit { 

    model: any = {}; 
    search_Master_cmbtest = { 
     ValidValues: [ 
      { display: '1', value: 'a' }, 
      { display: '2', value: 'b' } 
     ], 
     DefaultValue: { display: '1', value: 'a' } 
    }; 

    constructor(
     private route: ActivatedRoute, 
     private router: Router, 
     private patientService: TestpageService 
    ) { } 

    ngOnInit() { 
     this.initModel(); 
    } 

    private initModel() { 
     this.model = { 
      firstname: "avc",    
      cmbtest: null 
     }; 
    }  
} 

Htmlのファイル：

<div class="col-sm-4" [ngClass]="{ 'has-error': formsearch.firstname.$invalid }"> 
    <input type="text" 
     class="form-control text-left" 
     name="firstname" 
     maxlength="50" 
     [(ngModel)]="model.firstname" /> 
</div> 
<div class="col-sm-4"> 
    <select name="cmbtest" 
     class="form-control" [(ngModel)]="model.cmbtest"> 
     <option *ngFor="let option of search_Master_cmbtest.ValidValues" [ngValue]="option">{{option.display}}</option> 
    </select> 
</div> 

Answer 1

あなたにエラーの原因となっている行がある：

<div class="col-sm-4" [ngClass]="{ 'has-error': formsearch.firstname.$invalid }"> 

それはformsearchのfirstnameを読み取ることができません、これはあなたのモデルではなく、この場合エラーが指し示すものです。

これはフォームでない場合は削除する必要があります。 :)

これが実際にフォームの場合は、検証を確認する必要があります。以上により

#firstname ngModel 

ように、我々は、フォームでname="firstname"をバインド：あなたは次の行に注意する必要があり

<form #formsearch="ngForm"> 
    <input type="text" 
     name="firstname" 
     maxlength="50" #firstname ngModel 
     [(ngModel)]="model.firstname" required /> 
     <small *ngIf="!firstname.valid">Not valid!</small> 
    <!-- rest of your form --> 
</form> 

：あなたはfirstnameの検証をしたい場合は、私はあなたがこれを行うことを示唆しています次の行が動作します：

<small *ngIf="!firstname.valid">Not valid!</small>