本章中介紹響應式表單的建立及表單輸入值的校驗,對於模板表單就略過。

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

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

• 2、在元件的ts檔案中使用響應式表單

  import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
  export class ReactiveFormComponent implements OnInit {
      private 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);
          }
      }
  }
   
  

• 3、在元件的html頁面中使用

  <form [formGroup]="myForm" (ngSubmit)="postDate()">
      <div class="form-group">
          <label for="username">使用者名稱:</label>
          <input type="text" placeholder="請輸入使用者名稱" class="form-control" id="username" formControlName="username" />
      </div>
      <div class="form-group">
          <label for="mobile">手機號碼:</label>
          <input type="text" placeholder="請輸入手機號碼" class="form-control" id="mobile" formControlName="mobile"/>
      </div>
      <div formGroupName="password" style="border:none;">
          <div class="form-group">
              <label>密碼:</label>
              <input type="password" class="form-control" placeholder="請輸入密碼" formControlName="pass1" />
          </div>
          <div class="form-group">
              <label>確認密碼:</label>
              <input type="password" class="form-control" placeholder="請再次輸入密碼" formControlName="pass2" />
          </div>
      </div>
      <div class="form-group">
          <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />
      </div>
  </form>

二、使用表單校驗資料

• 1、angular中自帶了三個常見的表單校驗的是在Validators中的required,minLength,maxLength

• 2、自定義表單校驗器(其實就一個函式,函式的引數是當前需要校驗的行,返回一個任意物件)

  **格式**
  export function fnName(control:FormControl|FormGroup):any{
  
  }

• 3、響應式表單欄位中可以寫三個值,第一個是返顯到頁面上的,第二個引數是校驗器(可以是一組),第三個引數非同步校驗(常見判斷手機號碼,使用者名稱是否重複註冊)

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

• 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: '手機號碼格式不正確' } };
  }

• 2、使用自己定義的校驗器

  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: ['']
          })
      });
  }

• 3、定義一個密碼組的校驗

  // 定義一個密碼組的驗證方法
  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: '兩次密碼不一致' } };
  }

• 4、使用

  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})
      });
  }

四、關於前端頁面中錯誤的顯示

• 1、頁面顯示錯誤

  <div class="form-group">
      <label for="username">使用者名稱:</label>
      <input type="text" placeholder="請輸入使用者名稱" 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;">
      <div class="form-group">
          <label>密碼:</label>
          <input type="password" class="form-control" placeholder="請輸入密碼" formControlName="pass1" />
      </div>
      <div class="form-group">
          <label>確認密碼:</label>
          <input type="password" class="form-control" placeholder="請再次輸入密碼" formControlName="pass2" />
      </div>
      <!-- 對於group可以不在外面加一層判斷 -->
      <div>
          <p [hidden]="!myForm.hasError('passValidator','password')">
              {{myForm.getError('passValidator','password')?.info}}
          </p>
      </div>
  </div>

• 2、定義樣式檔案

  .ng-touched:not(form),.ng-invalid:not(form) {
      border: 1px solid #f00;
  }
  
  .ng-valid:not(form),.ng-untouched:not(form) {
      border: 1px solid #ddd;
  }
  p{
      color:#f00;
  }

五、自定義class顯示錯誤

• 1、在input輸入框上寫上

  表示該欄位無效且觸碰過就新增這個class=”error”

   [class.error]="myForm.get('username').invalid && myForm.get('username').touched"