angular4表单—模板式表单

今天我们继续学习angular4表单的内容，表单是系统中都不可或缺的一部分，所以在angular中提供了表单模块，表单的内容分为以下几个部分：

• 模板表单
• 模板表单的验证
• 响应式表单
• 响应式表单的验证

所以我们也是通过一个小的Demo来一步步完成这四部分的学习。

（一）准备工作

新建一个项目 ng new angular-form-demo

（二）模板表单

 首先先新建一个组件 ng g component form/template-form

 然后先按照我们原始的方式写出表单

 代码如下:

< form  action= "" >
    < div > 用户名: < input  type= "text"  name= "username" /></ div >
    < div > 密码： < input  type= "text"  name= "password" /></ div >
    < div > 确认密码: < input  type= "text"  name= "confirmpass" /></ div >
    < div > 电话： < input  type= "text"  name= "mobile" /></ div >
    < div >< input  type= "submit"  value= " 提交 " /></ div >

</form>

angular中定义了一些指令使用在表单上，要想在后台中获取表单字段，我们必须用特定的指令去标明，如下面是使用ng template-form之后的表单.

< form  #myForm =  "ngForm"  (ngSubmit) =  " onSubmit ( myForm .value)" >
    < div > 用户名: < input  ngModel type= "text"  name= "username" /></ div >
    < div  ngModelGroup= "passwordGroup" >
      < div > 密码： < input  ngModel type= "password"  name= "password" /></ div >
      < div > 确认密码: < input  ngModel type= "password"  name= "confirmPass" /></ div >
    </ div >
    < div > 电话： < input  ngModel type= "text"  name= "mobile" /></ div >
    < div >< input  type= "submit"  value= " 提交 " /></ div >

</form>

Notice: you should import the FormModules in config files if  you have an error like below:

there is no directive with “exportAs” set to “ngForm”

#myForm是模板变量，myForm变量可以自定义，但是如果是表单文件，#myForm后面的值 'ngForm'是固定的。

'template-form.component.ts ' you can receive the data from front end in here,

onSubmit(value) {
  console. log(value);

}

the result:

（三）模板表单的验证

在表单中，有些字段是必填项，有些字段长度有限制，又有些字段要求符合某个特定的规则（比如密码和确认密码框要相同），针对上述经常出现的现象，我们分别来讲如何在angular中实现：

 ①必填项

 在字段中添加required属性即可，如果表单为空，还需要出现提示信息，实现方式如下：

< div  class= "form-control" >
    < label  for= "username" > 用户名: </ label >
    < input  [(ngModel)] =  " model . name "  type= "text"  name= "username"  id= "username"  required #uname= "ngModel" />
    < div  [hidden] =  ' uname . valid  ||  uname . pristine ' >
     userName is required!
    </ div >

</div>

在上面的代码中uname是一个模板变量，把他绑定到ngModel上，这样该input的所有className状态都会被angular添加上。下面附上angular css的状态码信息：

上面Hidden的字段表示字典有效或者字段值没有变化时隐藏改提示，毕竟我们也想提供好的用户体验嘛。

除了上一种方式，我们也可以使用*ngIf指令来实现上述效果，代码如下所示：

< div  class= "form-control" >
    < label  for= "username" > 用户名: </ label >
    < input  [(ngModel)] =  " model . name "  type= "text"  name= "username"  id= "username"  required #uname= "ngModel" />
  < div  *ngIf= " uname . invalid  && ( uname . touched  ||  uname . dirty )" >
    < div  *ngIf= " uname .errors. required " >
      username is required yet.
    </ div >
  </ div >

</div>

还有另外一种方式如下，这种方式不用把每个字段绑定到ngModel上：

< div  class= "form-control" >

   <label for="username">用户名:</label>

   <input ngModel type="text" name="username" id="username" required/>

    < div  [hidden] =  "! myForm . form . hasError ('required','username')" >
      userName is required!
    </ div >
</ div >

②长度限制

比如密码的长度要限制为至少6个字符时，我们需要在angular中按照如下的方式实现：

< div >
  < label  for= "password" > 密码： </ label >
  < input  ngModel type= "password"  name= "password"  id= "password"  required  minlength= "6"  #pass= "ngModel" />
  < div  *ngIf= " pass . invalid  && ( pass . touched  ||  pass . dirty )" >
    < div  *ngIf= " pass .errors. minlength " >
      password must be at least 6 character long
    </ div >
  </ div >

</div>

上述实现方式也是结合angular指令来实现的，比如先定义属性minlength = "6",然后进行验证。最大长度也是同样的方法实现。

③自定义规则，比如验证电话号码是否符合规则，或者密码和确认密码是否相同。这些可以利用angular中自定义指令来实现，下面我们就以两个密码相同为例，来看看是如何实现的。

首先我们先自定义一个验证组件 validators.ts ,这里面存放一些通用的验证规则。下面是判断密码相等的验证方法。

export function  equalValidator(group: FormGroup): any {
  let  password: FormControl = group. get( "password")  as FormControl;
  let  cPassword:FormControl = group. get( "confirmPass")  as FormControl;
  let  valid = ( password. value ===  cPassword. value);
  return  valid ?  null :{ "equal":  true};

}

然后我们再新建一个判断相等的指令，这样就可以在模板中使用它了. ng g directive directives/equalsValidator

指令和组件的区别就是指令没有模板，selector用[directorName]括起来，这意味着指令是可以用在html属性中的，然后再配置一个providers的提供

器，校验器的provide值固定为NG_VALIDATORS，useValue为刚才定义的验证方法名。

import { Directive }  from  '@angular/core';
import { NG_VALIDATORS }  from  '@angular/forms';
import { equalValidator}  from  "../validator/validators";

@Directive({
  selector:  '[equal]',
  providers :[{
    provide :  NG_VALIDATORS,
    useValue :  equalValidator,
    multi:  true
  }],
})
export class EqualValidatorDirective {

constructor() { }

}

最后我们在模板中像用正常指令一样写入刚才自定义的指令，这样就可以实现验证两个密码是否相等的需求了，同理，我们还可以自定义验证手机号码是否符合规范。详细信息请移步gitHub上去看，你也可以下载我写好的demo :  https://github.com/Dan2Lin/angular-form-demo.git

< div  class= "form-control"  ngModelGroup= "passwordGroup"  equal >
    < div >
      < label  for= "password" > 密码： </ label >
      < input  ngModel type= "password"  name= "password"  id= "password"  required  minlength= "6"  #pass= "ngModel" />
      < div  *ngIf= " pass . invalid  && ( pass . touched  ||  pass . dirty )" >
        < div  *ngIf= " pass .errors. minlength " >
         password must be at least 6 character long
        </ div >
      </ div >
    </ div >
    < div >
    < label  for= "confirmPass" > 确认密码: </ label >
    < input  ngModel type= "password"  name= "confirmPass"  id= "confirmPass"  required />
    </ div >
  < div  [hidden] =  "! myForm.form.hasError ('equal','passwordGroup')" >
      两次密码不一致!
  </ div >

</div>

ok,到这里我们就学完了angular4中表单的第一部分，模板式表单以及验证，模板式表单一般用在简单表单，如果表单的规则比较多，通常会选择响应式表单，下次我们将继续学习表单的第二部分。