Question

我正在尝试自动填充选择输入。当表单打开时，select的值未填写，这是我的代码。

我有一个对象的静态数组（extensions），用户可以从中选择。此数组为CountryCode[]类型。

view.component.ts

<form [formGroup]='form' autocomplete="off">
...
   <select class="form-control" formControlName='cellExtInput'>

       <option *ngFor="let ext of extensions" [ngValue]="ext">
          ({{ ext.callingCode }}) {{ ext.name }}
       </option>

   </select>
...
</form>

controller.component.ts

export interface CountryCode {
  id: any,
  code3l: any,
  code2l: any,
  name: any,
  flag: any,
  callingCode: any,
}

async ngOnInit() {    


    // Initialize form
    this.form = new FormGroup({
      ...      
      cellExtInput: new FormControl(''),
    });

    var controls = this.form.controls;

    var code : CountryCode = {
      id: "131",
      code3l: "PRT",
      code2l: "PT",
      name: "Portugal",
      flag: "http://flags.fmcdn.net/data/flags/w580/pt.png",
      callingCode: "+351"
    }

    controls.cellExtInput.setValue(code, {onlySelf: true});

    ......
}

Answer 1

尝试

   <select class="form-control" formControlName='cellExtInput'>

       <option *ngFor="let ext of extensions" [value]="ext">
          ({{ ext.callingCode }}) {{ ext.name }}
       </option>

   </select>

我认为您在ngValue上遇到了问题。您正在为其指定一个对象，而不是原始类型，而<option>则采用原始类型的值。

如w3Schools

所述

属性 | 值 | 说明

已禁用|禁用指定应禁用一个选项

标签|文字|为选项指定一个较短的标签

已选择|选择指定在页面时应预先选择一个选项加载

值|文字|指定要发送到服务器的值

注意：OP仅在其代码中将[ngValue]更改为[value]。

选择输入的反应形式设定值

1 个答案: