时间戳

首页 > 解决方案 > 编辑模式下的角负载选择下拉值

angular - 编辑模式下的角负载选择下拉值

问题描述

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中的性别值是性别：'M'，然后是男性，我想获得下拉列表的预填充/自动选择值。如果值为性别：“F”，则为女性。如果为空字符串，则选择性别占位符。尝试使用 setValue 和 patchValue 但没有任何结果。

标签： angularangular-forms

解决方案

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

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

推荐阅读