Реактивное значение формы набора выбранного входа

Question

Я пытаюсь автозаполнить выбранный ввод. Когда форма открывается, значение выбора не заполнено, вот мой код.

У меня есть массив c объектов (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

Атрибут | Значение | Описание

отключено | отключен | Указывает, что опция должна быть отключена

label | текст | Задает более короткую метку для опции

selected | выбранный | Указывает, что параметр должен быть предварительно выбран при загрузке страницы

value | текст | Задает значение для отправки на сервер

Примечание: OP только изменил [ngValue] на [value] в своем коде.