在Angular 8中,要实现表单的预填充,可以使用Reactive Forms模块。下面是一个示例代码来展示如何在Angular 8中预填充表单:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
]
})
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } 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 fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
address: ['', Validators.required]
});
// 设置表单控件的初始值
this.myForm.patchValue({
name: 'John Doe',
email: 'johndoe@example.com',
address: '123 Main St'
});
}
}
以上代码中,FormGroup是一个表单控件的容器,其内的FormControl代表一个表单控件。在组件的ngOnInit方法中,我们使用FormBuilder来创建一个FormGroup,并使用patchValue方法来设置表单控件的初始值。
这样,表单将会在页面加载时预填充初始值。
注意:为了使用Reactive Forms,确保你已经导入了FormsModule和ReactiveFormsModule模块,并将它们添加到你的模块的imports数组中。
上一篇:表单未验证输入
下一篇:表单未正确保存到模型