ng4 Form表单相关

Posted 2020-11-03 Artmis

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(表单控件未被访问过)