要在Angular Material中使用响应式表单时设置mat-select的默认值,可以使用FormControl来控制mat-select的值。下面是一个包含代码示例的解决方法:
在组件的HTML模板中,使用formControlName来绑定mat-select到FormControl:
Select an option
{{option.viewValue}}
在组件的TS文件中,创建FormControl并设置默认值:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
options = [
{ value: 'option1', viewValue: 'Option 1' },
{ value: 'option2', viewValue: 'Option 2' },
{ value: 'option3', viewValue: 'Option 3' }
];
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
mySelect: new FormControl('option2') // 设置默认值
});
}
}
在上面的示例中,我们使用FormControl的构造函数来设置默认值为'option2'。这将在表单加载时将mat-select的默认值设置为'Option 2'。
请确保在组件的NgModule中导入ReactiveFormsModule:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
// ...
})
export class MyModule { }
通过使用FormControl并设置默认值,我们可以在Angular Material中的响应式表单中设置mat-select的默认值。