极客angular知识分享（6）-- 模板表单

基于模板的表单

---

定义

在模板中定义表单以及验证细节

基本表单

<!-- 基本表单 -->
<form class="bordered">
  <div class="form-group">
    <label for="username">姓名：</label>
    <input type="text" class="form-control" name="username" id="username" [(ngModel)]="product.username" />
  </div>
  <button class="btn btn-primary" (click)="addName()">提交</button>
</form>

product={};
  addName(){
    console.log(this.product);
  }

※使用[(ngModel)]必须引入模块@angular/forms中的FormsModule模块

表单验证

1. angular 内置验证属性

   required 指定必填的数据

   minlength 指定最小字符数

   maxlength 指定最大字符数。不能直接应用于表单元素，因为与同名的html5属性冲突。它可以与基于模型的表单一起使用

   pattern 指定用户填充的值必须符合正则表达式

2. 限制

   angular要求验证元素必须定义name属性

   必须存在form元素时，angular验证功能才起作用

   form中添加了novalidate属性，浏览器才知道不会使用原生的验证功能

3. 表单提交

   form的ngSubmit事件表单

   button的click事件提交表单

4. 示例代码

<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
    <div class="form-group">
      <label for="username">姓名：</label>
      <input type="text" class="form-control" 
          name="username" id="username" [(ngModel)]="product.username"
          required
          minlength="5"
          pattern="^[A-Za-z ]+$" />
    </div>
    <button class="btn btn-primary" >提交</button>
</form>

验证类样式化元素

1. ng-touched（是） ng-untouched（否）

   元素是否被用户访问

2. ng-pristine（否） ng-dirty（是）

   元素的内容是否被改变（改变后又恢复原值，还会保留在ng-dirty）

3. ng-valid（是） ng-unvalid（否）

   元素的内容是否符合验证的所有规则

<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
    <div class="form-group">
      <label for="username">姓名：</label>
      <input type="text" class="form-control" 
          name="username" id="username" [(ngModel)]="product.username"
          required
          minlength="5"
          pattern="^[A-Za-z ]+$" />
    </div>
    
    <button class="btn btn-primary" type="submit">提交</button>
</form>

input.ng-dirty.ng-valid{
    border:2px solid green;
}
input.ng-dirty.ng-invalid{
    border:2px solid red;
}
input.ng-touched.ng-invalid{
    border:2px solid red;
}

域级验证消息

1. ngModel可以用来访问宿主元素的验证状态
2. 模板引用变量获取宿主元素的ngModel
3. 模板引用变量属性

   path 元素的名称
   valid 为true 有效
   invalid 为true 无效
   pristine 未更改
   dirty 更改
   touched 访问元素
   untouched 未访问元素
   errors 返回一个对象，它的每个属性代表一个验证错误
   value 返回元素的值，用于自定义验证规则

※ 可以使用安全导航防止属性为null 如：username.errors?.required
?代表如果errors为null或undefined则不尝试访问它的属性

1. errors的属性

   required required属性被用于input元素时返回为true
   minlength.requiredLength 满足minlength规则所需要的字符
   minlength.actualLength 用户输入的字符数
   pattern.requiredPattern 使用pattern属性指定的正则表达式
   pattern.actualValue 返回元素的内容

<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
    <div class="form-group">
      <label for="username">姓名：</label>
      <input type="text" class="form-control" 
          name="username" id="username" [(ngModel)]="product.username"
          required
          minlength="5"
          pattern="^[A-Za-z ]+$" 
          #username="ngModel"/>
    </div>
    <ul class="text-danger list-unstyled" *ngIf="(username.dirty || username.touched) && username.invalid">
      <li *ngIf="username.errors.required">
        请输入用户名！
      </li>
      <li *ngIf="username.errors.minlength">
        用户名不能少于5个字符
      </li>
      <li *ngIf="username.errors.pattern">
        只能使用字符和空格
      </li>
    </ul>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="text" class="form-control" 
            name="password" id="username" [(ngModel)]="product.password"
            required
            minlength="5"
            pattern="^[A-Za-z ]+$" />
      </div>

    <button class="btn btn-primary" type="submit">提交</button>
</form>

使用组件显示验证消息

oproduct={};
  getValidateMsg(state:any, tingName?:string){
    let tring = state.path || tingName;
    let msg = []
    if(state.errors){
      for (let error in state.errors) {
        switch (error) {
          case "required":
            msg.push(`You must enter a ${tring}`);
            break;
          case "minlength":
            msg.push(`至少：${state.errors['minlength'].requiredLength}`);
          break;
          default:
            break;
        }
      }
    }
    return msg;
  }

<form novalidate (ngSubmit)="addName()">
    <div class="form-group">
      <label for="username">姓名：</label>
      <input type="text" class="form-control" 
          name="username" id="username" [(ngModel)]="oproduct.username"
          required
          minlength="5"
          pattern="^[A-Za-z ]+$" 
          #username1="ngModel"/>
    </div>
    <ul class="text-danger list-unstyled" *ngIf="username1.dirty && username1.invalid">
      <li *ngFor="let error of getValidateMsg(username1)">
        {{error}}
      </li>
    </ul>

    <button class="btn btn-primary" type="submit">提交</button>
</form>

验证整个form

1. 组件进入NgForm指令，并赋值给模板引用变量
2. 将form以实参传入
3. form.valid true 代表验证通过，否则说明有问题
4. form.reset() 可以重置表单为最初未访问状态

<form novalidate #myform="ngForm" (ngSubmit)="submit(myform)">
  <div class="bg-danger" *ngIf="formSubmited && myform.invalid">
    有问题！
  </div>
    <div class="form-group">
      <label for="username">姓名：</label>
      <input type="text" class="form-control" 
          name="username" id="username" [(ngModel)]="product.username"
          required
          minlength="5"
          pattern="^[A-Za-z ]+$" 
          #username="ngModel"/>
    </div>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="text" class="form-control" 
            name="password" id="username" [(ngModel)]="product.password"
            required
            minlength="5"
            pattern="^[A-Za-z ]+$" />
      </div>

    <button class="btn btn-primary" type="submit">提交</button>
</form>

禁用提交按钮

在提交或表单数据无效时，表单按钮应该设置为禁用

[disabled]="formSubmited && myform.invalid"