键入时清除表单验证错误

Question

编辑（2017年5月4日）：

经过大量研究，对我来说很明显，这目前不可能以“本地”方式进行。 看到这里： https : //github.com/angular/angular/issues/7113

原始帖子：

当前，以下代码使我可以在用户单击“提交”按钮时显示验证错误，而无需在输入字段中输入有效的电子邮件：

 import { Component } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent { submitted = false; public submitForm(form: any): void { this.submitted = true; console.log(form); } } 

 .invalid-message { color: yellow; } 

 <form id="loginForm" #loginForm="ngForm" (ngSubmit)="submitForm(loginForm.value)"> <div class="form-group"> <input type="email" class="form-control form-control-lg" #email="ngModel" name="email" ngModel required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$" placeholder="email"> <ng-container *ngIf="this.submitted && email.errors"> <small [hidden]="!email.errors.required" class="invalid-message float-right">EMAIL REQUIRED</small> <small [hidden]="!email.errors.pattern" class="invalid-message float-right">INCORRECT EMAIL FORMAT</small> </ng-container> </div> <button type="submit" form="loginForm" class="btn btn-secondary btn-block btn-lg">LOGIN</button> </form> 

我想要的是，当用户再次在输入中键入任何内容时，验证错误消息会自动消失。 例如，这就是Airbnb行为，如果您尝试登录Web会遇到这种情况。

Answer 1

看一下Reactive Forms模块。

它几乎是为这种事情而设计的，它公开了focus ， dirty ， touched和其他各种有用的属性。

而不是使用ngModel-您应该将每个输入绑定到[formControl]

然后在您的组件中。 您使用formBuilder构造每个控件。

constructor(fb : FormBuilder) {
    this.form = fb.group({
      'firstName' : ['', Validators.required],
      'lastName' : ['', Validators.maxLength(2)]
    })

请注意，这里的form是一个FormGroup ，它公开了一个get方法，您可以使用该方法来测试组中的每个项目。

每个项目都是一个FormControl您可以从API中找到所有这些内容。

例如：

hasError(n: string){
  return this.form.get(n).hasError('required');
}

如果您不想在用户键入时显示错误消息，则可以在*ngIf检查!focus

<div *ngIf="form.get('firstName').valid && !form.get('firstName').focus">
    Error Message
</div>

编辑：当涉及到ReactiveForms时，有很多要提及的地方-这里要提及的太多。 但是您可以查看以下一些资源：

官方Angular2 ReactiveForms指南

Thoughtram关于reactForms的博客

Answer 2

如何在您的错误容器的ngIf中添加条件以检查当前输入当前是否具有焦点？

像这样添加到您的ngIf：

ngIf="... && !elementHasFocus()"

并在控制器中定义当前功能。

function elementHasFocus(){
    // ensure you inject $element in your controller in order to access the current element which triggered the bind function
    return $element[0] === document.activeElement;
}