在Angular 6中,可以使用reset()
方法来清除表单字段的数据。您可以在表单组件的ngOnInit()
方法中调用reset()
方法,以确保在表单页面加载时首次清除数据。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
this.myForm.reset(); // 清除表单字段的数据
}
onSubmit() {
console.log(this.myForm.value); // 获取表单字段的数据
}
}
在上面的示例中,我们首先创建了一个名为myForm
的FormGroup
实例,并在ngOnInit()
方法中初始化了它。然后,我们调用reset()
方法来清除表单字段的数据。
请注意,reset()
方法将清除表单字段的值,并重置表单的状态(例如,dirty
、touched
等)。如果要为表单字段设置初始值,可以通过传递一个对象给reset()
方法来实现,例如:this.myForm.reset({ name: 'John', email: 'john@example.com' });
。
希望这可以帮助到您!