验证响应式表单

从上一个登录表单构建，我们可以快速轻松地添加验证。

Angular 2提供了开箱即用的许多验证器。 它们可以与其余的依赖关系一起导入。

app/login-form.component.ts

  1. import { Component } from '@angular/core';
  2. import { Validators, FormBuilder, FormControl } from '@angular/forms';
  4. @Component({
  5.   // ...
  6. })
  7. export class AppComponent {
  8.   username = new FormControl('', [
  9.     Validators.required,
  10.     Validators.minLength(5)
  11.   ]);
  13.   password = new FormControl('', [Validators.required]);
  15.   loginForm: FormGroup = this.builder.group({
  16.     username: this.username,
  17.     password: this.password
  18.   });
  20.   constructor(private builder: FormBuilder) { }
  22.   login () {
  23.     console.log(this.loginForm.value);
  24.     // Attempt Logging in...
  25.   }
  26. }

app/login-form.component.html

  1. <form [formGroup]="loginForm" (ngSubmit)="login()">
  3.   <div>
  4.     <label for="username">username</label>
  6.     <input
  7.       type="text"
  8.       name="username"
  9.       id="username"
  10.       [formControl]="username">
  12.     <div [hidden]="username.valid || username.untouched">
  13.       <div>
  14.         The following problems have been found with the username:
  15.       </div>
  17.       <div [hidden]="!username.hasError('minlength')">
  18.         Username can not be shorter than 5 characters.
  19.       </div>
  20.       <div [hidden]="!username.hasError('required')">
  21.         Username is required.
  22.       </div>
  23.     </div>
  24.   </div>
  25.   <div >
  26.     <label for="password">password</label>
  27.     <input
  28.       type="password"
  29.       name="password"
  30.       id="password" [formControl]="password">
  32.     <div [hidden]="password.valid || password.untouched">
  33.       <div>
  34.         The following problems have been found with the password:
  35.       </div>
  37.       <div [hidden]="!password.hasError('required')">
  38.         The password is required.
  39.       </div>
  40.     </div>
  41.   </div>
  43.   <button type="submit" [disabled]="!loginForm.valid">Log In</button>
  44. </form>

注意，我们对字段和表单本身添加了相当稳健的验证，只使用内置验证器和一些模板逻辑。

View Example

我们使用.valid和.untouched来确定是否需要显示错误，而字段是必需的，没有理由告诉用户如果字段尚未被访问，该值是错误的。

对于内置验证，我们在表单元素上调用.hasError()，我们传递一个字符串，它表示我们包含的验证器函数。 仅当此测试返回true时，才会显示错误消息。