如何通过重置按钮清除表单的错误消息/取消表单后答案

【问题标题】：How to clear the error messages of form through reset button/after cancel the form如何通过重置按钮清除表单的错误消息/取消表单后
【发布时间】：2019-02-19 19:47:28
【问题描述】：

我无法清除输入框周围的错误轮廓和输入框下方的错误消息。当我取消表单或单击重置按钮时，它必须清除输入字段的内容和错误消息，但它只清除内容，错误消息不会被清除。

我目前正在使用 this.formname.reset() 来清除文件但不清除错误消息。
我正在使用 Angular7。

TS 文件

loginForm: FormGroup;
 validation() {
        this.loginForm = this.formBuilder.group({
            userName: ['', Validators.required],
            password: ['', Validators.required]
        });
    }
 clearFields() {
          this.loginForm.reset();
          this.validation()
    }

HTML 代码

<form #formDirective="ngForm" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <label for="username">Username</label> <input type="text"
                    formControlName="userName" class="form-control"
                    placeholder="User name"
                    [ngClass]="{ 'is-invalid': submitted && f.userName.errors }" />
                <div *ngIf="submitted && f.userName.errors" class="invalid-feedback">
                    <div *ngIf="f.userName.errors.required">Username is required</div>
                </div>
            </div>
            <div class="form-group">
                <label for="password">Password</label> <input type="password"
                    formControlName="password" class="form-control"
                    [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
                    placeholder="Password" />
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                    <div *ngIf="f.password.errors.required">Password is required</div>
                </div>
            </div>
            <div class="form-group text-center">
                <button class="btn btn-primary" (click)="onSubmit();">Login</button>
                &nbsp;
                <button type="button" class="btn btn-light"
                    (click)="clearFields();">cancel</button>
            </div>
        </form>

【问题讨论】：

发布您的代码。到目前为止你做了什么？
请将相应的代码添加到问题中，作为您所拥有的工作示例，这有助于 SO 社区更好地回答您的问题Minimal, Complete and Verifiable
用我的 html 和 ts 代码编辑了问题
您如何在模板中访问 f.password ..？
@Madhavi 使用 form.resetForm()

标签： angular typescript

【解决方案1】：

除了Sivaramakrishnan 的回答，您可能还想check this answer 之前提出的类似问题。

【讨论】：

我喜欢你建议的帖子。我用的一样，但由于某种原因 this.myNgForm 是 gettign 未定义。知道为什么会这样吗？
我看到你的代码中有一个布尔值submitted。当您调用clearFields 时，您是否将其重置为false？
没错，我在更改它似乎删除的一些东西时就这样做了。我现在添加了它按预期工作。非常感谢您的帮助。
很好，很乐意提供帮助。为未来的用户添加解决方案或标记为已回答。祝你好运。

【解决方案2】：

再次调用函数this.validation() 从clearFields() 函数中删除该行

clearFields() {
          this.loginForm.reset();
          this.validation()
    }

【讨论】：

还是没有运气。同样的问题