在Angular中,您可以使用FormGroup
来定义表单,并使用FormControl
来定义表单字段。要设置默认值输入,您可以在创建FormGroup
对象时,在其中定义FormControl
对象并设置默认值。以下是一个代码示例:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
username: new FormControl('John'), // 设置默认值为'John'
password: new FormControl(''), // 设置默认值为空字符串
rememberMe: new FormControl(true) // 设置默认值为true
});
}
onSubmit() {
// 处理表单提交
}
}
在上述代码中,我们通过在new FormControl()
中传递默认值来设置每个字段的默认值输入。在ngOnInit()
生命周期钩子函数中,我们创建了一个FormGroup
对象,并在其中定义了三个FormControl
对象,并设置了它们的默认值。
您可以在模板中使用这个FormGroup
对象来绑定和显示表单字段的默认值输入。例如,可以使用formControlName
指令将username
字段绑定到HTML输入框,并在value
属性中显示默认值:
在上述代码中,我们使用formControlName
指令将username
、password
和rememberMe
字段分别绑定到HTML输入框和复选框。我们还使用value
属性来显示默认值输入。
请注意,为了使用FormGroup
和FormControl
,您需要在模块中导入ReactiveFormsModule
。您可以在app.module.ts
中的imports
数组中添加以下行来导入ReactiveFormsModule
:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
// ...
})
export class AppModule { }
通过这种方式,您可以在Angular中定义FormGroup
中字段的默认值输入。