设置 Angular 2 下拉列表中所选内容的值

2024-01-12

我正在使用 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 的情况下设置此下拉列表的选定状态的最佳方法是什么


您可以设置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例如,当选择框发生变化并将其用作模型时。

这是基于答案如何在 Angular 2 中添加条件属性? https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

设置 Angular 2 下拉列表中所选内容的值 的相关文章

随机推荐