Поле выбора углового выбора не отображается

Question

Я использую Angular 6.

В файле component.html я использую FormGroup , а поле выбора выглядит как

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" class="form-control">
    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>
</select>

Файл component.ts содержит

amountGiven: AmountGiven;
updateMoneyForm: FormGroup;
modeOfPayments: Array<ModeOfPaymentData>;

ngOnInit() {

  this._initializeForm();

  // Get mode of payments
  this._getModeOfPayments();
}



private _initializeForm() {
  this.updateMoneyForm = this.formBuilder.group({
    mode_of_payment: new FormControl(),
  });
}

private _getModeOfPayments() {
  this.modeOfPaymentService.list().subscribe(
    res => {
      this.modeOfPayments = res;
      this._setFormValue();
    }
  );
}

private _setFormValue() {
  this.updateMoneyForm.setValue({
    mode_of_payment: this.amountGiven.mode_of_payment,
  });
}

Но это дает поля выбора, такие как

КогдаЯ нажимаю на поле выбора, варианты всплывающие, но даже там выбранное поле не выбрано по умолчанию, и всегда первый вариант имеет галочку.

Answer 1

Проблема здесь в том, что выбранная новая опция не вызовет никаких изменений атрибутов TS (тип сценария).

Вам необходимо реализовать действие onchange для тега select как такового.

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" 
 class="form-control" (change)="someFunction($event)">

    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" 
    [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>

</select>

После чего вам нужно будет реализовать функцию, например, она изменяет выбранное по умолчанию значение.

Answer 2

Вы не должны использовать директиву selected, реактивная форма позаботится об этом за вас:

<select [formControl]="modeOfPayment">
    <option *ngFor="let mode of modeOfPayments"
    [ngValue]="mode.id">{{ mode.title }}</option>
</select>

Вот ссылка на работающий код.