在Angular 6中,要设置响应式表单中
在组件的初始化方法中,创建表单控件并设置默认值。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
selectOption: new FormControl('option2') // 设置默认选中值为 'option2'
});
}
}
在模板中,使用formGroup和formControlName来绑定表单控件。
这样,当表单加载时,select的默认值将会被选中。
注意,要在组件中引入FormsModule和ReactiveFormsModule来使用响应式表单。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
// ...
})
export class AppModule { }
希望以上信息能对您有所帮助!