角度表单重置问题

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>