在Angular 2的下拉列表中设置选定的值

时间:2017-04-11 14:38:48

标签: angular typescript html-select angular2-formbuilder

我正在使用FormBuilder向数据库添加值。

 this.formUser = this._form.group({
   "firstName": new FormControl('', [Validators.required]),
  "lastName": new FormControl('', [Validators.required]),
  "externalCompany": new FormControl('', [Validators.required])
})

在添加这些值之前,我想将下拉列表(外部公司)的值设置为我事先提交的值

<select class="form-control" id="companyExternal" formControlName="externalCompany" (ngModelChange)=onChangeExternalC($event)>
     <option value="" >Select existing company...</option>
     <option value="{{company}}" *ngFor="let company of externalCompanies">{{company}}</option>
     <option value="Company name..." >ADD ANOTHER...</option>
</select>

我试过这个

this._commServe.addExternalCompany(company).subscribe((data) => {   
  this.formUser.value.externalCompany = company.CompanyName;
}, (error) => {
  this.errorMessage = <any>error;
})

我也尝试使用ngModel,它也没有按预期工作。

如果不诉诸jQuery,最好的方法是设置此下拉列表的选定状态

1 个答案:

答案 0 :(得分:3)

您可以在模型中具有所选值的选项上设置selected属性。

[attr.selected]="selectedExternalCompany"

使用html模板:

<select class="form-control" id="companyExternal" formControlName="externalCompany" (ngModelChange)=onChangeExternalC($event)>
     <option value="" >Select existing company...</option>
     <option value="{{company}}" 
         *ngFor="let company of externalCompanies" 
         [attr.selected]="selectedExternalCompany"
         >{{company}}</option>
     <option value="Company name..." >ADD ANOTHER...</option>
</select>

在组件中,当选择框更改时设置selectedExternalCompany并将其用作模型。

这是基于答案How to add conditional attribute in Angular 2?