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('');

}