在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中字段的默认值输入。