Я создаю реактивную форму с помощью Angular 9, у меня есть раскрывающийся список, например:
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
...
<div class="form-group">
<label class="small mb-1" for="isSigningUpFor">I'm signing up for</label>
<select class="form-control py-4" id="isSigningUpFor"
formControlName="signingUpFor" (change)="changeSigningUpFor($event)">
<option value="Please select..." disabled selected>-- Select --</option>
<option *ngFor="let opt of signingUpForOptions" [value]="opt.value"
[selected]="(opt.isSelected == true)">{{ opt.text }} ({{ opt.isSelected }})
</option>
</select>
Вот соответствующий код из компонента:
registerForm = this.fb.group(
{
// other fields here
signingUpFor: ['']
},
);
signingUpForOptions = [
{
text: 'My Family',
value: '1',
isSelected: false
},
{
text: 'My Sports Team',
value: '2',
isSelected: false
},
{
text: 'The Lads',
value: '3',
isSelected: false
}
];
changeSigningUpFor(e: any) {
var thisValue = e.target.value;
this.signingUpForOptions.forEach(x => {
if (x.value == thisValue) {
x.isSelected = true;
} else {
x.isSelected = false;
}
});
this.registerForm.patchValue({
signingUpFor: thisValue
});
}
Выпадающий список отображается нормально и показывает параметры. Когда я выбираю один, changeSigningUpFor работает, как ожидалось, исправляя новое значение и соответствующим образом устанавливая флаги isSelected. Я просто не вижу выбранный параметр в пользовательском интерфейсе, как показано ниже:
Результат будет таким же, если я удалю onChange вызов функции (ie выбранное значение не отображается). Удаление opt.isSelected == true тоже не решает проблему.
Я не получаю никаких ошибок в консоли. Я чувствую себя здесь идиотом, это должно быть базовое c, но я не привык работать с формами таким образом, что я делаю не так?
Спасибо