Блог

У меня есть форма в angular, в которой есть несколько выпадающих списков.

Выпадающий список 1—>

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Title" 
    formControlName="Title">
    <mat-option>Title</mat-option>
    <mat-option value="Mr">Mr</mat-option>
    <mat-option value="Miss">Miss</mat-option>
  </mat-select>
</mat-form-field>
  

Выпадающий список 2 —>

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Country" 
    formControlName="Country">
    <mat-option>Country</mat-option>
    <mat-option value="US">US</mat-option>
    <mat-option value="UK">UK</mat-option>
  </mat-select>
</mat-form-field>
  

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

PS: Когда я извлекаю значение из выпадающего списка Title при сохранении, я получаю значение, которое было выбрано ранее.

Проблема проста, вы использовали то же самое [(значение)] в значении, поэтому оно ведет себя таким же образом. Просто измените одно или оба.

Вы дважды привязываете одну и ту же переменную ‘selected’ к обоим значениям для опции select. При изменении одного изменяется значение в другом параметре, а также оба параметра дважды привязаны к переменной ‘selected’. Измените одну из них на какую-либо другую переменную.