Angualr的表单校验

1 第一种表单校验

1 html部分

1 重点

2 代码

1. #validForm3="ngForm"和validForm3.form.valid用于控制表单中所有输入框的校验是否通过。
2. [nzErrorTip]="btnErrorTips" 和[nzErrorTip]="urlTplEdit" 当网址校验出错时报错，包括必填项没有填，校验出错。
3. [(ngModel)]="website.name"和[(ngModel)]="website.param" 进行表单值的绑定。

 <nz-tab nzTitle="网址校验">
              <form nz-form nz-row #validForm3="ngForm">
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired>网址名称</nz-form-label>
                  <nz-form-control [nzSpan]="15" [nzErrorTip]="btnErrorTips">
                    <input nz-input name="linkText" [(ngModel)]="website.name" [pattern]="websiteNameValid" maxlength="10" required />
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired>网址链接</nz-form-label>
                  <nz-form-control [nzSpan]="15" [nzErrorTip]="urlTplEdit">
                    <input nz-input name="linkAddr" required [pattern]="urlPattern" [(ngModel)]="website.param" />
                  </nz-form-control>
                  <ng-template #urlTplEdit let-control>
                    <ng-container *ngIf="control.hasError('pattern')">必须以http://或https://开头！</ng-container>
                    <ng-container *ngIf="control.hasError('required')">必填!</ng-container>
                  </ng-template>

			    <ng-template #btnErrorTips let-control>
			      <ng-container *ngIf="control.hasError('required')">
			        网址名称不能为空
			      </ng-container>
			      <ng-container *ngIf="control.hasError('pattern')">
			        网址名称只能包含中文、英文、数字、_、- 且长度不超过15
      </ng-container>
    </ng-template>
                </nz-form-item>
              </form>
              
              <div class="modal-footer modal-footer-update">
                <icc-button [btnType]="'hollow'" (btnClick)="editCancelSuggestion(item)"> <span>关闭</span></icc-button>
                <icc-button [btnType]="'default'" (btnClick)="editSaveSuggestion(item)" [isDisabled]="!validForm3.form.valid">
                  <span>保存</span>
                </icc-button>
              </div>
</nz-tab>

2 TS部分

1 重点

1. website 表单的值
2. websiteNameValid 表单名字正则校验

2 代码

  website= {
    name: null,
    param: null,
  };
  websiteNameValid= "^[\\u4E00-\\u9FA5A-Za-z0-9_-]+$";

2 第二种表单校验

1 html部分

1 重点

1. 在<form>标签中采用 [formGroup]="chatbotForm"进行绑定，chatbotForm中保存所有的验证数据。
2. formControlName="name"绑定被验证的数据的名称。
3. [(ngModel)]="params.name"绑定name使得name会自动变化。
4. 第二点和第三点中的name都指向同一个数据。

2 代码

 <form class="card-form" nz-form [formGroup]="chatbotForm" se-container="1" >
      <nz-form-item class="form-name">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>用户名称</nz-form-label>
            <nz-form-control class="form-name-control" [nzSm]="16" [nzXs]="24"  nzExtra="限中文和英文开头，建议十六个字符以内，不支持空格和特殊符" nzErrorTip="您输入的chatbot名称不符合要求，请更改。">
              <div class='form-name-control-div'>
                <input class="form-name-control-div-input" nz-input type="text" placeholder="请输入chatbot名称" [(ngModel)]="params.name"  formControlName="name" auto-complete="off"   [disabled]="chatbotDisbaled"/>
              </div>
              <div class='origin-color' *ngIf="originParms.name">变更前: {{originParms.name}}</div>
            </nz-form-control>
          </nz-form-item>
 </form>

2 TS部分

1 重点

1. 在使用校验前先引入校验模块
2. 一般的情况可用正则表达式进行验证
3. 其他可以采用手动校验的方式进行

2 代码

import { Component, Inject, OnInit } from '@angular/core';
// 引入模块
import {
  AbstractControl,
  FormBuilder,
  FormControl,
  FormGroup,
  ValidationErrors,
  ValidatorFn,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
})

export class ChatbotComponent implements OnInit {
	
// 双向绑定数据	
params = {
	name:null,
};
	
// 自动校验部分
chatbotForm: FormGroup = this.fb.group({
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(1),
      Validators.maxLength(16),
      Validators.pattern('^[\u4e00-\u9fa5a-zA-Z]+[\u4e00-\u9fa5a-zA-Z0-9_]*$'),
      this.nameValid(),
    ]),
 });

// 手动校验部分
 nameValid(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      let website: string = control.value;
      let flag1: boolean = website.startsWith('http://');
      let flag2: boolean = website.startsWith('https://');
      if (flag1 || flag2) {
        return null;
      } else {
        return {false:false};
      }
    };
  }	

}