本章中介紹響應式表單的創建及表單輸入值的校驗,對于模板表單就略過。
一、使用響應式表單的步驟
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"以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
