要解决Angular 7中重置表单后表单始终有效的问题,您可以使用resetForm
方法来重置表单并将其设置为初始无效状态。
以下是一个解决方法的代码示例:
ngForm
指令绑定表单,并为其设置一个本地引用:
@ViewChild
装饰器引用表单,并在需要重置表单的地方调用resetForm
方法:import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
// 组件元数据
})
export class MyComponent {
@ViewChild('myForm') myForm: NgForm;
// 重置表单
resetForm() {
this.myForm.resetForm(); // 重置表单
this.myForm.form.markAsPristine(); // 将表单标记为初始状态,即无效
}
}
在上面的代码中,resetForm
方法首先调用resetForm
函数来重置表单,然后调用markAsPristine
方法将表单标记为初始状态,即无效。
通过这种方法,您可以确保在重置表单后,表单处于初始状态下无效。