1

我经常在 Angular 中使用模板驱动的表单，并使用resetForm()函数重置表单。但偶尔，这会遇到一个奇怪的行为，其中resetForm()函数只重置值而不是验证错误。我做了一些调试，发现submitted状态没有被重置。

样本表格：

<form #testForm="ngForm">

    <input 
        type="text" 
        name="testField" 
        ngModel #testField="ngModel" 
        [ngClass]="{'is-invalid': testField.errors && testForm.submitted}" 
        required>
        
    <div class="invalid-feedback">
        Required field
    </div>

    <button type="submit" (click)="onSubmit(testForm)">Submit</button>

</form>

在大多数情况下，下面的代码可以工作并重置值和提交状态。

正常复位：

onSubmit(form:NgForm) {
    // Other operations
    form.resetForm();
}

有时上面的代码只是替换了值并且验证仍然存在，因为submitted状态仍然是真实的。我见过其他人有同样的问题，并且正在使用一种技巧，即将重置函数包装在一个settimeout()零间隔内。

哈克：

onSubmit(form:NgForm) {
    // Other operations
    setTimeout(() => {
        form.resetForm();
    }, 0);
}

这将完成这项工作，但我仍然不明白它为什么或如何工作。对这种行为有什么想法吗？

4

0 回答 0