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个汉字，但是汉字、数字混合输入的时候，如何更好的校验

  {
    {byteLengthBox.errors.byteLength.errorMsg}}

• 2、验证手机号

  {
    {mobileBox.errors.mobile.errorMsg}}

• 3、URL

  {
    {urlBox.errors.url.errorMsg}}

• 4、验证mac地址

  {
    {macBox.errors.mac.errorMsg}}

响应表单验证

ng-zorro示例

• 手机号

    
      手机号
      
        
        
          {
    {form.get('mobile').errors.mobile.errorMsg}}
        
      
    

• 身份证

    
      身份证
      
        
        
          {
    {form.get('identityCard').errors.identityCard.errorMsg}}
        
      
    

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

    
      remark
      
    
        
          {
    {form.get('remark').errors.byteLength.errorMsg}}
        
      
    

响应式表单示例：

响应式HTML代码如下：

  字节长度：
  
  

    {
    {name.errors.pattern}}
  


  手机号：
  
  

    {
    {mobile.errors.mobile.errorMsg}}
  


  身份证号：
  
  

    {
    {identityCard.errors.identityCard.errorMsg}}
  


  MAC地址：
  
  

    {
    {mac.errors.mac.errorMsg}}
  



  URL地址：
  
  

    {
    {url.errors.url.errorMsg}}
  

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

}