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>

   <inputngModeltype="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中表单的第一部分，模板式表单以及验证，模板式表单一般用在简单表单，如果表单的规则比较多，通常会选择响应式表单，下次我们将继续学习表单的第二部分。