标签：规则 size 16px gif ova tin bsp username 验证
ng4中，有两种方式去声明一个表单。
1.Template-Driven Forms - 模板驱动式表单
<form #f=‘ngForm‘ novalidate (ngSumbit)=‘onSubmit(f)‘> <input type=‘text‘ #username=‘ngModel‘ required> <div *ngIf=‘username.error?.required && username.touched‘ class=‘error‘> Name is required. </div> </form>
注意：
1.
把ngForm的值赋给#f变量，通过该变量则可以方便的获取表单的值
<form #f=‘ngForm‘ novalidate (ngSumbit)=‘onSubmit(f)‘> <input type=‘text‘ name=‘username‘ [(ngModel)]=‘user.username‘ required> <div *ngIf=‘f.controls.username?.required‘ class=‘error‘> Name is required. </div> </form>
2.
使用ngModel指令，ngModel会自动关联表单控件name属性，并使用该值作为ngForm对象的属性名
<input type=‘text‘ name=‘username‘ ngModel>
<input type=‘text‘ name=‘username‘ [ngModel]=‘user.username‘>
<input type=‘text‘ name=‘username‘ [(ngModel)]=‘user.username‘>
3.
[(ngModel)]=‘user.username‘ <=> [ngModel]=‘user.username‘+(ngModelChange)=‘user.username=$event‘
两种写法是等价的
4.
#username - 指向input表单控件
#username=‘ngModel‘ -指向NgModel实例
2.
除了required验证
还是有minlength、maxlength等验证规则
3.
除了touched状态
还有valid(控件有效)、invalid(控件无效)、pristine(控件值未改变)、dirty(控件值已改变)、untouched(表单控件未被访问过)
标签：规则 size 16px gif ova tin bsp username 验证
原文地址：https://www.cnblogs.com/artimis/p/9019518.html
