大佬教程收集整理的这篇文章主要介绍了Angular4 模板式表单用法以及验证,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在表单中声明一个模板变量,往<form>标签中加入#heroForm="ngForm",代码如下:
<form #heroForm="ngForm">
heroForm变量是一个到NgForm指令的引用,它代表该表单的整体。
注意,当在表单中使用[(ngModel)]时,必须要定义name属性。在内部,Angular 创建了一些FormControl,并把它们注册到NgForm指令,再将该指令附加到<form>标签。 注册每个FormControl时,使用Name属性值作为键值
状态 | 为真时的 CSS 类 | 为假时的 CSS 类 |
---|---|---|
控件被访问过 | ng-touched | ng-untouched |
控件的值变化了 | ng-dirty | ng-prisTine |
控件的值有效 | ng-valid | ng-invalid |
往姓名<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}}
.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”。
<form (ngSubmit)="onSubmit()" #heroForm="ngForm"> ------------------------ <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button> </form>
为了往模板驱动表单中添加验证机制,我们要添加一些验证属性,就像原生的HTML表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。
<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>
请注意以下几点:
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的。
以上是大佬教程为你收集整理的Angular4 模板式表单用法以及验证全部内容,希望文章能够帮你解决Angular4 模板式表单用法以及验证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。