Angular響應式表單校驗及提交主動觸發所有校驗

一、使用響應式表單的步驟

1、在模塊(一般是app.module.ts)中引入ReactiveFormsModule

2、在組件的ts文件中使用響應式表單

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
    selector: 'app-form-validate',
    templateUrl: './form-validate.page.html',
    styleUrls: ['./form-validate.page.scss'],
})
export class FormValidatePage implements OnInit {
    public myForm: FormGroup;
    
    constructor(private fb: FormBuilder) {
        this.createForm();
    }
    
    ngOnInit() {
    }
    
    // 創建表單元素
    createForm() {
        this.myForm = this.fb.group({
            username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
            mobile: ['', [Validators.required]],
            password: this.fb.group({
                        pass1: [''],
                        pass2: ['']
                        })
        });
    }
    
    // 提交表單函數
    postDate() {
        /**
         * valid:是否有效
         * invalid:無效
         * dirty:臟
         * status:狀態
         * errors:顯示錯誤
         */
        if(this.myForm.valid){
            console.log(this.myForm.value);
        }
        else
        {
            //如果驗證失敗:主動循環觸發驗證錯誤信息顯示在界面上
            for (const i in this.myForm.controls) {
            this.myForm.controls[i].markAsTouched();
            this.myForm.controls[i].updateValueAndValidity();
        }
        
     }
    
    }

}

3、在組件的html頁面中使用

<form [formGroup]="myForm" (ngSubmit)="postDate()">
    <div class="form-group">
        <label for="username">用戶名:</label>
        <input type="text" placeholder="請輸入用戶名" [class.error]="myForm.get('username').invalid && myForm.get('username').touched"
        class="form-control" id="username" formControlName="username" />
        <!-- 當輸入框沒有訪問的時候或者合法的時候不顯示 -->
        <div [hidden]="myForm.get('username').valid || myForm.get('username').untouched">
            <p [hidden]="!myForm.hasError('required','username')">用戶名必填的</p>
            <p [hidden]="!myForm.hasError('minlength','username')">用戶名長度過短</p>
            <p [hidden]="!myForm.hasError('maxlength','username')">用戶名長度太長</p>
        </div>
    </div>
    <div class="form-group">          
        <label for="mobile">手機號碼:</label>          
        <input type="text" placeholder="請輸入手機號碼" class="form-control" id="mobile" formControlName="mobile"/>          
        <div [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched">          
        <p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p>          
    </div>          
    </div>          
    <div formGroupName="password" style="border:none;">          
        <p class="form-group">          
        <label>密碼:</label>          
        <input type="password" class="form-control" placeholder="請輸入密碼" formControlName="pass1" />          
        </p>          
        <p class="form-group">          
        <label>確認密碼:</label>          
        <input type="password" class="form-control" placeholder="請再次輸入密碼" formControlName="pass2" />          
        </p>
        <!-- 對于group可以不在外面加一層判斷 -->
        <div>          
            <p [hidden]="!myForm.hasError('passValidator','password')">          
            {{myForm.getError('passValidator','password')?.info}}
            </p>          
        </div>          
    </div>
    <p class="form-group">      
        <input type="submit" value="提交" class="btn btn-warning" />      
    </p>      
</form>


二、自定義一個校驗方法的步驟

1、把項目中需要用的校驗器單獨寫一個文件

import { FormControl, FormGroup } from '@angular/forms';

    /**
     * 自定義驗證器(其實就是一個函數,一個返回任意對象的函數)
     * 傳遞的參數是當前需要驗證的表單的FormControl
     * 通過傳遞的參數獲取當前表單輸入的值
     */

     
//手機號校驗
export function mobileValidator(control: FormControl): any {
  console.dir(control);
  // 獲取到輸入框的值
  const val = control.value;
  // 手機號碼正則
  const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  const result = mobieReg.test(val);
  return result ? null : { mobile: { info: '手機號碼格式不正確' } };
}



//定義一個密碼組的校驗
export function passValidator(controlGroup: FormGroup): any {
  // 獲取密碼輸入框的值
  const pass1 = controlGroup.get('pass1').value as FormControl;
  const pass2 = controlGroup.get('pass2').value as FormControl;
  console.log('你輸入的值:', pass1, pass2);
  const isEqule: boolean = (pass1 === pass2);
  return isEqule ? null : { passValidator: { info: '兩次密碼不一致' } };
}



2、使用自己定義的校驗器=>mobileValidator

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    },{validator: passValidator})
  });
}


三、動態調整驗證規則

為了演示 "動態調整驗證規則" 的功能,我新增了兩個控件:

  • radio - 用于讓用戶設置是否開啟手機登錄。

  • tel - 當用戶開啟手機登錄功能,用于讓用戶輸入手機號碼。

當用戶開啟手機登錄功能,手機號碼對應控件的驗證規則,必須是必填且格式為合法的手機號碼。當用戶不開啟手機登錄功能時,手機號碼對應控件將不是必填的。

新增 radio 控件

<div class="form-group">
   <div class="col-md-offset-1 col-md-8 checkbox">
      開啟手機登錄      <label>
         <input type="radio" value="1"
            formControlName="enableMobile">
              是      </label>
      <label>
         <input type="radio" value="0"
            formControlName="enableMobile">
              否      </label>
   </div></div>

新增 tel 控件

<div class="form-group"
    [ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }">
          <label class="col-md-2 control-label"
                 for="mobileId">手機號碼</label>

          <div class="col-md-8">
            <input class="form-control"
                   id="mobileId"
                   type="text"
                   placeholder="請輸入手機號碼"
                   formControlName="mobile"/>
            <span class="help-block" *ngIf="(mobile.touched || mobile.dirty) 
               && mobile.errors">
                  <span *ngIf="mobile.errors.required">
                     請輸入手機號碼
                  </span>
                  <span *ngIf="mobile.errors.minlength">
                     手機號碼格式不正確
                  </span>
            </span>
          </div>
</div>

動態調整驗證規則功能

ngOnInit(): void {
    ...    this.signupForm.get('enableMobile').valueChanges
      .subscribe(value => this.checkMobile(value));
}

checkMobile(enableMobile: string): void {  const mobileControl = this.signupForm.get('mobile');
  
  enableMobile === "1" ? 
      mobileControl.setValidators([Validators.required,
        Validators.pattern('1(3|4|5|7|8)\\d{9}')]) :
      mobileControl.clearValidators();
  
    mobileControl.updateValueAndValidity();
}



轉載請說明出處:原文鏈接 http://www.yixcsu.live/qdjs/168

相關閱讀:

安裝npm包應該放在devDependencies還是dependencies

AntDesign Of Angular之響應式柵格尺寸:nzXs、nzSm、nzMd、nzLg、nzXl、nzXXl

Angular 報錯 Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular Ionic項目build打包后發布到IIS刷新報錯404解決方法

大乐透专家预测 河北家乡棋牌麻将下载安装 印尼好赚钱吗 体育比分网逛球街 爱彼迎当房东赚钱吗 传奇今生真的那么赚钱吗 bf在线网球比分 时时彩 19海淘是怎么赚钱的 啄木鸟皮具赚钱吗 上海百搭麻将游戏规则 四川快乐12 街机捕鱼1000炮无限币版 游戏和房地产赚钱吗 真实海钓赚钱吗 雪缘园日本 江西快3