使用 angular2 反应形式动态设置选择框值

Posted 2023-02-22

【中文标题】使用 angular2 反应形式动态设置选择框值

【英文标题】：set the selectbox value dynamically using angular2 reactive forms

【发布时间】：2017-11-13 12:54:43

【问题描述】：

我正在使用 angular2 反应式表单来构建表单。但是我如何动态设置选择框值。（我希望'VPA'应该动态预选）

<form [formGroup]="addBeneficiaryForm">
    <ion-item>
                <ion-label stacked>Type</ion-label>                    
                <ion-select [formControl]="type">
                  <ion-option value="VPA">VPA</ion-option>
                  <ion-option value="MMID">MMID/MOBILE</ion-option>                 
                </ion-select>
              </ion-item>
       </form>

我尝试按以下方式设置，但不起作用。

@Component(
  selector: 'addbenificiary',
  templateUrl: 'addbenificiary.html' 
)
export class AddBeneficiaryPage 
  addBeneficiaryForm: FormGroup;
  type: AbstractControl;
  constructor(private fb: FormBuilder)
    this.addBeneficiaryForm = fb.group(     
       'type': ['', Validators.compose([Validators.required])]         
    ); 
  
 public ionViewDidLoad() 
    this.addBeneficiaryForm.controls['type'].setValue('VPA');
 

【问题讨论】：

如果在创建的时候初始化它会发生什么？像这样：'type': ['VPA', Validators.compose([Validators.required])]

我用于其他目的，即编辑表单处理

【参考方案1】：

尝试使用formControlName 而不是[formControl]：

<ion-select formControlName="type">

【讨论】：

不错的收获@AJT_82！

@sebaferreras 谢谢，我有我（罕见的）时刻 :D :D