0

编辑（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 的行为，如果您尝试登录网络，您可能会遇到这种行为。

4

2 回答 2

1

看看Reactive Forms模块。

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

而不是使用 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');
}

如果您不想在用户输入时显示错误消息，您可以!focus在您的*ngIf

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

编辑：关于 ReactiveForms 有很多要提的地方——这里要提的太多了。但是您可以查看其中一些资源：

官方 Angular2 ReactiveForms 指南

关于响应式表单的 Thoughtram 博客

于 2017-05-03T16:28:36.930 回答
0

如何在错误容器的 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;
}
于 2017-05-03T16:40:15.690 回答