angular4中關(guān)于表單的校驗(yàn)示例
更新時(shí)間：2017年10月16日 09:05:31 作者：水痕01
本篇文章主要介紹了angular4中關(guān)于表單的校驗(yàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本章中介紹響應(yīng)式表單的創(chuàng)建及表單輸入值的校驗(yàn),對(duì)于模板表單就略過。
一、使用響應(yīng)式表單的步驟
1、在模塊(一般是app.module.ts)中引入ReactiveFormsModule
2、在組件的ts文件中使用響應(yīng)式表單
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
export class ReactiveFormComponent implements OnInit {
private myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
ngOnInit() {
}
// 創(chuàng)建表單元素
createForm() {
this.myForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
mobile: ['', [Validators.required]],
password: this.fb.group({
pass1: [''],
pass2: ['']
})
});
}
// 提交表單函數(shù)
postDate() {
/**
* valid:是否有效
* invalid:無效
* dirty:臟
* status:狀態(tài)
* errors:顯示錯(cuò)誤
*/
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="請(qǐng)輸入用戶名" class="form-control" id="username" formControlName="username" />
</div>
<div class="form-group">
<label for="mobile">手機(jī)號(hào)碼:</label>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" 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="請(qǐng)輸入密碼" formControlName="pass1" />
</div>
<div class="form-group">
<label>確認(rèn)密碼:</label>
<input type="password" class="form-control" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" formControlName="pass2" />
</div>
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />
</div>
</form>
二、使用表單校驗(yàn)數(shù)據(jù)
1、angular中自帶了三個(gè)常見的表單校驗(yàn)的是在Validators中的required,minLength,maxLength
2、自定義表單校驗(yàn)器(其實(shí)就一個(gè)函數(shù),函數(shù)的參數(shù)是當(dāng)前需要校驗(yàn)的行,返回一個(gè)任意對(duì)象)
**格式**
export function fnName(control:FormControl|FormGroup):any{
}
3、響應(yīng)式表單字段中可以寫三個(gè)值,第一個(gè)是返顯到頁面上的,第二個(gè)參數(shù)是校驗(yàn)器(可以是一組),第三個(gè)參數(shù)異步校驗(yàn)(常見判斷手機(jī)號(hào)碼,用戶名是否重復(fù)注冊(cè))
三、自定義一個(gè)校驗(yàn)方法的步驟
1、把項(xiàng)目中需要用的校驗(yàn)器單獨(dú)寫一個(gè)文件
import { FormControl, FormGroup } from '@angular/forms';
/**
* 自定義驗(yàn)證器(其實(shí)就是一個(gè)函數(shù),一個(gè)返回任意對(duì)象的函數(shù))
* 傳遞的參數(shù)是當(dāng)前需要驗(yàn)證的表單的FormControl
* 通過傳遞的參數(shù)獲取當(dāng)前表單輸入的值
*/
export function mobileValidator(control: FormControl): any {
console.dir(control);
// 獲取到輸入框的值
const val = control.value;
// 手機(jī)號(hào)碼正則
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: '手機(jī)號(hào)碼格式不正確' } };
}
2、使用自己定義的校驗(yàn)器
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、定義一個(gè)密碼組的校驗(yàn)
// 定義一個(gè)密碼組的驗(yàn)證方法
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})
});
}
四、關(guān)于前端頁面中錯(cuò)誤的顯示
1、頁面顯示錯(cuò)誤
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" placeholder="請(qǐng)輸入用戶名" class="form-control" id="username" formControlName="username" />
<!-- 當(dāng)輸入框沒有訪問的時(shí)候或者合法的時(shí)候不顯示 -->
<div [hidden]="myForm.get('username').valid || myForm.get('username').untouched">
<p [hidden]="!myForm.hasError('required','username')">用戶名必填的</p>
<p [hidden]="!myForm.hasError('minlength','username')">用戶名長(zhǎng)度過短</p>
<p [hidden]="!myForm.hasError('maxlength','username')">用戶名長(zhǎng)度太長(zhǎng)</p>
</div>
</div>
<div class="form-group">
<label for="mobile">手機(jī)號(hào)碼:</label>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" 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="請(qǐng)輸入密碼" formControlName="pass1" />
</div>
<div class="form-group">
<label>確認(rèn)密碼:</label>
<input type="password" class="form-control" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" formControlName="pass2" />
</div>
<!-- 對(duì)于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顯示錯(cuò)誤
1、在input輸入框上寫上
表示該字段無效且觸碰過就添加這個(gè)class=”error”
[class.error]="myForm.get('username').invalid && myForm.get('username').touched"
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
本文主要介紹AngularJS 依賴注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08 
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)路由中傳遞參數(shù)的相關(guān)技巧,并總結(jié)了相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下
2017-05-05 
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下
2019-05-05 
再談Angular4 臟值檢測(cè)(性能優(yōu)化)
這篇文章主要介紹了再談Angular4 臟值檢測(cè)(性能優(yōu)化)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04 
這篇文章主要介紹了詳解Angular cli配置過程記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11 
這篇文章主要介紹了用AngularJs驗(yàn)證表單實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-05-05 
AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
這篇文章主要介紹了AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS使用ng-route實(shí)現(xiàn)路由功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-12-12 
什么是 AngularJS？AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下
2014-12-12