2017-09-14 2 views
0

Angular FormGroupを使用してフォームのドロップダウンコントロールにデフォルト値を設定しようとしています(私はAngular 4を使用しています)。ドロップダウンは、与えられたリストとよく移入が、デフォルト値は、その次のコードのいずれかのエラーが表示されないset.Alsoされていない私が使用していたコードである -Angular Formgroupのドロップダウンを初期化します

HTMLコード

<div class="col-xs-2"> 
    <label class="control-label" for="Country">Country</label> 
    <select formControlName="CountryID" [(ngModel)]="CountryID" class="form-control"> 
     <option *ngFor="let country of Countries" [ngValue]="country.CountryID">{{country.CountryName}}</option> 
    </select> 
</div> 

は、タイプコード

ngOnInit() { 
     this.Countries = [ 
      { "CountryID": 0, "CountryName": "Select Country" }, 
      { "CountryID": 1, "CountryName": "Country 1" }, 
      { "CountryID": 2, "CountryName": "Country 2" }, 
      { "CountryID": 3, "CountryName": "Country 3" }, 
      { "CountryID": 4, "CountryName": "Country 4" }, 
      { "CountryID": 5, "CountryName": "Country 5" } 
     ]; 

     this.inputProcessingForm = this._domBuilder.group({ 
      CandidateBuilderAppId: [''], 
      FirstName: ['Amit'], 
      MiddleInitial: '', 
      LastName: '', 
      Gender: 'S', 
      DateOfBirth: new Date(), 
      SocialSecurityNumber: 0, 
      PersonalEmail: '[email protected]', 
      CorpEmail: '', 
      HomePhone: '', 
      WorkPhone: '', 
      WorkCellPhone: '', 
      WorkFax: '', 
      WorkExtension: '', 
      RemoteFax: '', 
      Address1: '', 
      Address2: '', 
      CountryID: 0, 
      State: 0, 
      City: 0, 
      ZipCode: 0 
     }); 
} 

何か間違っているとお考えください。どんな助けもありがとう。

答えて

0

テンプレートから[(ngModel)]="CountryID"を削除してみることはできますか?原因はdocsによると、私は慣例のどちらかを推測しています(反応型を使用する場合はformControlName、テンプレート駆動型を使用する場合はngModel)を使用する必要があります。そうしないと、「アクセサ」が混乱する可能性があります。

+0

ありがとうございました。私はこれをやってくれました –

関連する問題