Angular 表格重置问题

Question

我是 Angular 的新人，我有一个 FromGroup:

inputData: FormGroup;

.....

this.inputData = this.formBuilder.group({
        vorname: ['', [Validators.required]],
        nachname: ['', [Validators.required]],
        ort: ['', [Validators.required]],
        anschrift: ['', [Validators.required]],
        geburtsdatum: ['', [Validators.required]],
        gueltigAb: ['', [Validators.required]]
    });

我有一个按钮可以用这个方法清除表单内容：

protected onClearFormContent() {
    this.inputData.reset();
}

现在，当我单击按钮时，表单中的输入数据被清除，但由于所有控件都是强制性的，表单如下所示：

我不希望我的输入字段因为内容为空而被标记为无效，因为整个表单已重新加载。

经过一段时间的搜索，我找到了这个解决方案：

protected onClearFormContent() {
    this.inputData.reset();
    Object.keys(this.inputData.controls).forEach(key => {
        this.inputData.controls[key].setError(null);
    });
}

但是之后验证不起作用，如果我将其中一个必填字段留空也没关系，它不会被标记为无效。

我尝试使用已修改/未修改的值，但没有帮助。

有人可以帮忙解决这个问题吗？

提前致谢！

解决方案

好的，@ammad-hassan 的解决方案非常有效。我只需要更改我的按钮：

<button mat-button (click)="onClearFormContent()">Formular leeren</button>

收件人：

<button mat-button type="submit">Formular leeren</button>

然后像这样调用我的函数：

(ngSubmit)="onClearFormContent()"

Answer 1

尝试调用 this.inputData.markAsUntouched();，而不是在重置表单后将错误设置为 null。此外，尝试调用 this.userForm.resetForm() 而不是 this.inputData.reset()。使这个易于访问- 像这样将表单声明为 NgForm：

@ViewChild("userForm") userForm: NgForm;

并在您的模板中

<form #userForm="ngForm" (ngSubmit)="onSaveUser()" novalidate>
    ....
</form>

Angular 表格重置问题

Angular Form reset issue

angular

angular-forms