编辑模式下的角负载选择下拉值答案

【问题标题】：Angular load selected dropdown value in edit mode编辑模式下的角负载选择下拉值
【发布时间】：2020-10-19 21:37:23
【问题描述】：

HTML -

<select id="gender" formControlName="gender" [(ngModel)]="gender">
            <option value="" disabled selected hidden>Gender</option> 
            <option [value]="gender" *ngFor="let gender of genderObj">{{gender}}</option> 
</select>

TS-

genderObj = ['Male', 'Female', 'Other'];

ngOnInit(): void {
    this.formDetails();
}

initForm() {
    this.Form = this.formBuilder.group({
      gender: ['', Validators.compose([Validators.required])]
    });
  }

 formDetails() {
    this.userService.getFormDetails(this.Id)
      .subscribe((res: any) => {
        this.data = res.body.data;
      });
  }

如果 API 中的性别值是 gender:'M' 然后是男性，我想获得一个预填充/自动选择的下拉值。如果值为 gender:"F"，则为 Female。如果 空字符串 则 选择性别 占位符。尝试使用 setValue 和 patchValue 但没有任何反应。

【问题讨论】：

为什么要使用ngModel 和响应式表单？在这里查看为什么stackoverflow.com/questions/40458739/…。

标签： angular angular-forms

【解决方案1】：

在.subscribe 块中，您可以设置表单的性别。由于我们不知道您返回的数据的结构，您必须自己实现性别特定的东西。设置表单值，您可以执行以下操作：

this.form.gender.patchValue(...) <-- set the value here

【讨论】：