angular6 from表单正则较验证，响应式表单验证、模板表单验证

 

资源地址

https://www.npmjs.com/package/great-ngform

环境准备

• 1、安装npm包 npm install great-ngform --save
• 2、引入module

import {GreatValidateModule} from "great-ngform";
@NgModule({
  imports: [
    CommonModule,
    GreatValidateModule,
    FormsModule
  ]
})

模板表单校验方式

• 1、验证字节长度

例如数据库定义的长度为varchar2(20)，但是界面上可以输入汉字、数字等，所以最多只能输入10个汉字，但是汉字、数字混合输入的时候，如何更好的校验

<!-- 只需要在input标签上添加greatByteLength="20"即可 -->
<input name="byteLength" #byteLengthBox="ngModel" [(ngModel)]="byteLength" greatByteLength>
<!-- 显示错误信息 -->
<div *ngIf="***">
  {{byteLengthBox.errors.byteLength.errorMsg}}
</div>
<!-- 错误信息内容：长度不能超过20字节，已超出长度为：2 -->

• 2、验证手机号

<!-- 只需要在input标签上添加greatMobile即可 -->
<input name="mobile" #mobileBox="ngModel" [(ngModel)]="mobile" greatMobile>
<!-- 显示错误信息 -->
<div *ngIf="***">
  {{mobileBox.errors.mobile.errorMsg}}
</div>
<!-- 错误信息内容：手机号格式有误 -->

• 3、URL

<!-- 只需要在input标签上添加greatUrl即可 -->
<input name="url" #urlBox="ngModel" [(ngModel)]="url" greatUrl>
<!-- 显示错误信息 -->
<div *ngIf="***">
  {{urlBox.errors.url.errorMsg}}
</div>
<!-- 错误信息内容：手机号格式有误 -->

• 4、验证mac地址

<!-- 只需要在input标签上添加greatMac即可 -->
<input name="mac" #macBox="ngModel" [(ngModel)]="mac" greatMac>
<!-- 显示错误信息 -->
<div *ngIf="***">
  {{macBox.errors.mac.errorMsg}}
</div>
<!-- 错误信息内容：mac地址格式有误 -->

响应表单验证

ng-zorro示例

• 手机号

    <nz-form-item>
      <nz-form-label nzXs="24" nzSm="7" nzRequired nzFor="mobile">手机号</nz-form-label>
      <nz-form-control nzXs="24" nzSm="12" nzMd="10">
        <input nz-input formControlName="mobile" id="mobile" placeholder="手机号" greatMobile>
        <nz-form-explain *ngIf="form.get('mobile').dirty && form.get('mobile').errors">
          {{form.get('mobile').errors.mobile.errorMsg}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

• 身份证

    <nz-form-item>
      <nz-form-label nzXs="24" nzSm="7" nzRequired nzFor="identityCard">身份证</nz-form-label>
      <nz-form-control nzXs="24" nzSm="12" nzMd="10">
        <input nz-input formControlName="identityCard" id="identityCard" placeholder="身份证" greatIdentityCard
               fieldName="identityCard">
        <nz-form-explain *ngIf="form.get('identityCard').dirty && form.get('identityCard').errors">
          {{form.get('identityCard').errors.identityCard.errorMsg}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

• 字节长度（本示例假设最多50字节）

    <nz-form-item>
      <nz-form-label nzXs="24" nzSm="7" nzRequired nzFor="remark">remark</nz-form-label>
      <nz-form-control nzXs="24" nzSm="12" nzMd="10">
    <textarea id="remark" name="remark" class="form-control"
              formControlName="remark"
              required
              greatByteLength="50" fieldName="byteLength" failName="errorMsg"
    ></textarea>
        <nz-form-explain *ngIf="form.get('remark').dirty && form.get('remark').errors">
          {{form.get('remark').errors.byteLength.errorMsg}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

响应式表单示例：

响应式HTML代码如下：

<div>
  字节长度：
  <input type="text" [formControl]="name" greatByteLength="20">
  <div *ngIf="name.dirty && name.errors">
    {{name.errors.pattern}}
  </div>
</div>
<div>
  手机号：
  <input type="text" [formControl]="mobile" greatMobile>
  <div *ngIf="mobile.dirty && mobile.errors">
    {{mobile.errors.mobile.errorMsg}}
  </div>
</div>
<div>
  身份证号：
  <input type="text" [formControl]="identityCard" greatIdentityCard>
  <div *ngIf="identityCard.dirty && identityCard.errors">
    {{identityCard.errors.identityCard.errorMsg}}
  </div>
</div>
<div>
  MAC地址：
  <input type="text" [formControl]="mac" greatMac>
  <div *ngIf="mac.dirty && mac.errors">
    {{mac.errors.mac.errorMsg}}
  </div>
</div>

<div>
  URL地址：
  <input type="text" [formControl]="url" greatUrl>
  <div *ngIf="url.dirty && url.errors">
    {{url.errors.url.errorMsg}}
  </div>
</div>

响应式TS代码：

import { Component } from '@angular/core';
import {FormControl} from "@angular/forms";

@Component({
  selector: 'app-reactive01',
  templateUrl: './reactive01.component.html',
  styleUrls: ['./reactive01.component.css']
})
export class Reactive01Component {

  constructor() { }

  name = new FormControl('');
  mobile = new FormControl('');
  identityCard = new FormControl('');
  mac = new FormControl('');
  url = new FormControl('');

}