Angular4 模板式表单用法以及验证

NgForm指令

在表单中声明一个模板变量，往<form>标签中加入#heroForm="ngForm"，代码如下：

<form #heroForm="ngForm">

heroForm变量是一个到NgForm指令的引用，它代表该表单的整体。

• 什么是NgForm指令？ 但我们明明没有添加过NgForm指令啊！
• Angular替你做了。Angular会在<form>标签上自动创建并附加一个NgForm指令。
• NgForm指令为form增补了一些额外特性。 它会控制那些带有ngModel指令和name属性的元素，监听他们的属性（包括其有效性）。 它还有自己的valid属性，这个属性只有在它包含的每个控件都有效时才是真。

注意，当在表单中使用[(ngModel)]时，必须要定义name属性。在内部，Angular 创建了一些FormControl，并把它们注册到NgForm指令，再将该指令附加到<form>标签。 注册每个FormControl时，使用name属性值作为键值

通过 ngModel 跟踪修改状态与有效性验证

往姓名<input>标签上添加名叫 spy 的临时模板引用变量， 然后用这个 spy 来显示它上面的所有 CSS 类：

<input type="text" class="form-control" id="name"
  required
  [(ngModel)]="model.name" name="name"
  #spy>
<br>TODO: remove this: {{spy.className}}

添加用于视觉反馈的自定义 CSS：

.ng-valid[required],.ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

模板引用变量可以访问模板中输入框的 Angular 控件。 这里，创建了名叫name的变量，并且赋值为 "ngModel"，用来显示和隐藏验证错误信息：

<label for="name">Name</label>
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
<div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
  Name is required
</div>

为什么是 “ngModel”？ 指令的 exportAs 属性告诉 Angular 如何链接模板引用变量到指令。 这里把name设置为ngModel是因为ngModel指令的exportAs属性设置成了 “ngModel”。

使用 ngSubmit 提交该表单

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
    ------------------------
    <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
</form>

模板驱动验证

为了往模板驱动表单中添加验证机制，我们要添加一些验证属性，就像原生的HTML表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。

• 每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着INVALID状态）或者null（对应着VALID状态）。
• 我们可以通过把ngModel导出成局部模板变量来查看该控件的状态。 比如下面这个例子就把NgModel导出成了一个名叫name的变量：

<form novalidate>
  <input id="name" name="name" class="form-control"
         required minlength="4" forbiddenName="bob"
         [(ngModel)]="hero.name" #name="ngModel" >
  <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
    <div *ngIf="name.errors.required">
      Name is required.
    </div>
    <div *ngIf="name.errors.minlength">
      Name must be at least 4 characters long.
    </div>
    <div *ngIf="name.errors.forbiddenName">
      Name cannot be Bob.
    </div>
  </div>
</form>

请注意以下几点：

• <input>元素带有一些HTML验证属性：required 和 minlength。它还带有一个自定义的验证器指令forbiddenName
• name="ngModel"把NgModel导出成了一个名叫name的局部变量。NgModel把自己控制的FormControl实例的属性映射出去，让我们能在模板中检查控件的状态，比如valid和dirty
• <div>元素的*ngIf揭露了一套嵌套消息divs，但是只在有“name”错误和控制器为dirty或者touched
• 每个嵌套的<div>为其中一个可能出现的验证错误显示一条自定义消息。比如 required、minlength和 forbiddenName

自定义验证器

• 在模板驱动表单中，我们不用直接访问FormControl实例。所以我们不能像响应式表单中那样把验证器传进去，而应该在模板中添加一个指令
• Angular在验证流程中的识别出指令的作用，是因为指令把自己注册到了NG_VALIDATORS提供商中，该提供商拥有一组可扩展的验证器

forbidden-name.directive.ts (providers)

providers: [{provide: NG_VALIDATORS,useExisting: ForbiddenValidatorDirective,multi: true}]

然后该指令类实现了Validator接口，以便它能简单的与 Angular 表单集成在一起：

@Directive({
  selector: '[appForbiddenName]',providers: [{provide: NG_VALIDATORS,multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input() forbiddenName: string;
 
  validate(control: AbstractControl): {[key: string]: any} {
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName,'i'))(control)
                              : null;
  }
}

forbiddenNameValidator函数，该函数的定义看起来是这样的：

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

一旦 ForbiddenValidatorDirective写好了，我们只要把forbiddenName选择器添加到输入框上就可以激活这个验证器了。比如：

<input id="name" name="name" class="form-control"
       required minlength="4" forbiddenName="bob"
       [(ngModel)]="hero.name" #name="ngModel" >

你可能注意到了自定义验证器指令是用useExisting而不是useClass来实例化的。注册的验证器必须是这个 ForbiddenValidatorDirective 实例本身，也就是表单中 forbiddenName 属性被绑定到了"bob"的那个。如果用useClass来代替useExisting，就会注册一个新的类实例，而它是没有forbiddenName的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!