Angular 在编辑模式下加载选定的下拉值

Question

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:[=31，我想获得下拉列表的 prefilled/autoselected 值=] 然后男。如果值为 gender:"F"，则 Female。如果 空字符串 则 Select 性别 占位符。尝试了 setValue 和 patchValue 但没有任何结果。

Answer 1

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

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

Angular 在编辑模式下加载选定的下拉值

Angular load selected dropdown value in edit mode

angular

angular-forms