在Angular 7中,你可以使用FormGroup
和FormControl
来实现表单取消功能。下面是一个示例代码:
首先,在你的组件类中导入所需的模块:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
然后,在组件类中定义一个变量来保存表单的初始值:
initialFormValue: any;
接下来,在ngOnInit
生命周期钩子中初始化表单并设置初始值:
ngOnInit() {
this.initialFormValue = {
name: 'John',
email: 'john@example.com'
};
this.myForm = new FormGroup({
name: new FormControl(this.initialFormValue.name),
email: new FormControl(this.initialFormValue.email)
});
}
在模板中,你可以将表单绑定到FormGroup
和FormControl
:
最后,在组件类中实现取消功能:
cancel() {
// 将表单重置为初始值
this.myForm.setValue(this.initialFormValue);
}
现在,当点击“取消”按钮时,表单的值将被重置为初始值。
请注意,上述代码假设你已经导入了ReactiveFormsModule
并在模块中进行了配置。