问题描述:
在 Angular 中使用响应式表单时,当存在多个 drop-down 控件时,无法对它们进行独立选择。这是因为它们共享同一个 FormControl,而 FormControl 的值会被所有同样绑定它的控件所共享。
解决方案:
对于每个 drop-down 控件,需要单独创建一个 FormControl。
示例代码(html):
示例代码(ts):
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
@Component({
selector: 'app-drop-down',
template: `
`,
})
export class DropDownComponent implements OnInit {
formGroup: FormGroup;
options: Observable;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.options = this.getOptions();
this.formGroup = this.formBuilder.group({
option1: '',
option2: '',
});
}
getOptions(): Observable {
return of(['Option 1', 'Option 2', 'Option 3']);
}
}