這次帶給大家angular4關於表單校驗步奏詳解，angular4關於表單校驗的注意事項有哪些，下面就是實戰案例，一起來看一下。
本章介紹響應式表單的建立及表單輸入值的校驗,對於範本表單就略過。
一、使用響應式表單的步驟
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()"> <p class="form-group"> <label for="username">用户名:</label> <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" /> </p> <p class="form-group"> <label for="mobile">手机号码:</label> <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/> </p> <p 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> </p> <p class="form-group"> <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" /> </p> </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、頁面顯示錯誤
<p class="form-group">
<label for="username">用户名:</label>
<input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
<!-- 当输入框没有访问的时候或者合法的时候不显示 -->
<p [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>
</p>
</p>
<p class="form-group">
<label for="mobile">手机号码:</label>
<input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
<p [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched">
<p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p>
</p>
</p>
<p 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可以不在外面加一层判断 -->
<p>
<p [hidden]="!myForm.hasError('passValidator','password')">
{{myForm.getError('passValidator','password')?.info}}
</p>
</p>
</p>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"相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是angular4關於表單校驗步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
