• 验证响应式表单

    验证响应式表单

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

    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时，才会显示错误消息。