您可以使用以下代码示例来保存后清除Angular FormControls的内容,并避免表单错误:
在组件的.ts文件中:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.createForm();
}
createForm() {
this.form = this.fb.group({
// 定义表单控件和验证规则
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
// 其他表单控件...
});
}
saveForm() {
if (this.form.valid) {
// 执行保存操作...
// 清除表单控件的值和错误状态
this.form.reset();
Object.keys(this.form.controls).forEach(key => {
this.form.get(key).setErrors(null);
});
}
}
}
在组件的.html文件中:
在上述代码中,我们首先使用FormBuilder
创建了一个带有验证规则的表单。然后,在saveForm()
方法中,我们首先检查表单的有效性。如果表单有效,我们执行保存操作,并通过调用reset()
方法和setErrors()
方法来清除表单控件的值和错误状态。最后,我们在模板中使用*ngIf
指令来显示表单控件的错误消息。
上一篇:保存后嵌套实体包含null值。
下一篇:保存后实际图像尺寸发生变化。