1.模板式表單

在html模板上控制

指令對應的實例

?

1.ngForm指令：標記表單，會隱式創建FormGroup類的實例，這個類代表表單數據模型，并存儲表單數據；

2.ngModel指令：標記單個字段，ngFrom指令會發現含有ngModel指令的標簽，并添加到表單數據模型中，使用該指令必須跟隨name屬性；

3.ngModelGroup指令：標記多個字段組合，表現形式是一個對象，如{name:"張三",pass:"123"}；

例子：

<!--模板變量myForm指向ngForm對象--> <form #myForm = "ngForm" (ngSubmit) = "onSubmit(myForm.value)"><div>用戶名:<input ngModel type="text" name="username"/></div><!--ngModelGroup將字段嵌套成一個組--><div ngModelGroup="passwordGroup"><div>密碼：<input ngModel type="password" name="password"/></div><div>確認密碼:<input ngModel type="password" name="confirmPass"/></div></div><div>電話：<input ngModel type="text" name="mobile"/></div><div><input type="submit" value="提交"/></div> </form>

結果：

?

2.響應式表單

在ts上控制表單數據，可用于動態生成表單

類對應的指令

formGroup：標記組，表單也屬于組，屬于屬性指令，需要加 [ ]

formGroupName：標記組，用于formGroup指令范圍內部。

formControl：標記字段，屬于屬性指令，需要加 [ ]，用于在formGroup指令范圍外部。

formControlName：標記字段，用于formGroup指令范圍內部。

formArrayName：標記數組，用于formGroup指令范圍內部。

例子：

reactiveForm.html

<form [formGroup]="formModel" (submit)=onSubmit() novalidate><div formGroupName="dateRange">起始日期:<input type="date" formControlName="from">截止日期:<input type="date" formControlName="to"></div><div><ul formArrayName="emails"><!-- 循環formArray數組，和下標 --><li *ngFor="let e of this.formModel.get('emails').controls; let i=index;"><!-- formArray沒有key，所有使用屬性綁定[]，值為數組的下標 --><input type="text" [formControlName]="i"></li></ul><button type="button" (click)="addEmail()">增加Email</button></div><button type="submit">保存</button> </form> <input type="text" [formControl]="username">

reactiveForm.ts

import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, FormArray } from '@angular/forms/src/model';@Component({selector: 'app-reactive-form',templateUrl: './reactive-form.component.html',styleUrls: ['./reactive-form.component.css'] }) export class ReactiveFormComponent implements OnInit {//定義數據模型formModel : FormGroup = new FormGroup({dateRange : new FormGroup({from:new FormControl(),to:new FormControl()}),emails : new FormArray([new FormControl("a@aa.com"),new FormControl("b@bb.com"),])});username:FormControl=new FormControl("張三");　constructor() {}ngOnInit() {}onSubmit(){console.log(this.formModel.value);}addEmail(){let emails=this.formModel.get("emails") as FormArray;emails.push(new FormControl());} }

?也可以使用FormBuilder類來創建數據模型，上面代碼改成：

　formModel : FormGroup;constructor(fb:FormBuilder){ //定義數據模型this.formModel = fb.group({dateRange : fb.group({from:[''],to:['']}),emails : fb.array([["a@aa.com"],["b@bb.com"],])});

?

3.響應式表單校驗

angular4提供了validator類的預定義校驗：

• required - 設置表單控件值是非空的

• email - 設置表單控件值的格式是 email

• minlength - 設置表單控件值的最小長度

• maxlength - 設置表單控件值的最大長度

• pattern - 設置表單控件的值需匹配 pattern 對應的模式

當然，也可以進行自定義校驗

例子：

reactiveForm.html

<form [formGroup]="formModel" (ngSubmit) = "onSubmit()" novalidate><div>用戶名:<input formControlName="username"/></div><!-- 當驗證通過或者未點擊該字段時隱藏，狀態字段untouched=true表示未點擊，touched=true表示已點擊 --><div [hidden]="formModel.get('username').valid || formModel.get('username').untouched"><!-- 1.在模板上硬編碼錯誤信息 --><!-- [hidden]=false表示顯示錯誤信息，hasError(校驗失敗返回對象的key，校驗字段的name) --><div [hidden]="!formModel.hasError('required','username')">用戶名是必填項</div><div [hidden]="!formModel.hasError('minLength','username')">用戶名最小長度6</div> </div><div formGroupName="passwordsGroup"><div>密碼：<input formControlName="password"/></div><!-- 包含在group中的hasError第二個參數為數組[groupname,controlname] --><div [hidden]="!formModel.hasError('minLength',['passwordsGroup','password'])">密碼最小長度是6</div><div>確認密碼:<input formControlName="pconfirm"/></div><div [hidden]="!formModel.hasError('equal','passwordsGroup')">{{formModel.getError('equal',passwordsGroup)?.passErrDesc}}</div></div><div>電話：<input formControlName="mobile"/></div><!-- 當驗證沒有通過或者未改變該字段值時顯示 狀態字段pristine=ture表示未改變，dirty=ture表示已改變--><div [hidden]="formModel.get('mobile').valid || formModel.get('username').pristine"><!-- 2.動態錯誤提示 --><div [hidden]="!formModel.hasError('mobile','mobile')">{{formModel.getError('mobile')?.mobileErrDesc}}</div></div><div><input type="submit" value="提交"/></div> </form>

reactiveForm.ts

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms/src/model'; import { FormBuilder,Validators} from '@angular/forms';@Component({selector: 'app-reactive-form2',templateUrl: './reactive-form2.component.html',styleUrls: ['./reactive-form2.component.css'] }) export class ReactiveForm2Component implements OnInit {formModel:FormGroup;/*** 自定義手機號校驗* 返回值：正確返回 null* 錯誤返回 key:value(value可以是對象錯誤key:錯誤信息，也可以是任意值)* @param control */mobileValidator(control:FormControl):any{var myreg = /^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/; let valid = myreg.test(control.value);console.log("mobile的校驗結果是"+valid);return valid ? null : {mobile:{mobileErrDesc:"密碼和確認密碼不匹配"}};}//自定義密碼組校驗 equalValidatir(group:FormGroup):any{let password:FormControl= group.get("password") as FormControl;let pconfirm:FormControl= group.get("pconfirm") as FormControl;let valid:boolean = (password.value === pconfirm.value);console.log("密碼校驗結果："+valid);return valid ? null :{equal:{passErrDesc:"密碼和確認密碼不匹配"}};}constructor(fb:FormBuilder) {//定義數據模型this.formModel = fb.group({//預定義校驗username:['',[Validators.required,Validators.minLength(6)]],mobile:['',this.mobileValidator],passwordsGroup:fb.group({password:[''],pconfirm:['']},{validator:this.equalValidatir})});}ngOnInit() {}onSubmit(){//整個表單校驗通過if(this.formModel.valid){console.log(this.formModel.value);}} }

當然，有些校驗方法時通用的，所以我們可以提取出全局的校驗方法。

需要function聲明該方法，再通過 export 關鍵字暴露該方法。

validator.ts

import { FormControl, FormGroup } from "@angular/forms";//自定義手機號碼組校驗 export function mobileValidator(control:FormControl):any{var myreg = /^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/; let valid = myreg.test(control.value);console.log("mobile的校驗結果是"+valid);return valid ? null : {mobile:{mobileErrDesc:"密碼和確認密碼不匹配"}}; }//自定義密碼組校驗 export function equalValidatir(group:FormGroup):any{let password:FormControl= group.get("password") as FormControl;let pconfirm:FormControl= group.get("pconfirm") as FormControl;let valid:boolean = (password.value === pconfirm.value);console.log("密碼校驗結果："+valid);return valid ? null :{equal:{passErrDesc:"密碼和確認密碼不匹配"}};}

異步校驗器

用來調用遠程的服務來校驗表單的值。異步校驗器跟普通的校驗器一樣，只不過返回的是一個可觀測的流。

例子：

validator.ts

import { FormControl, FormGroup } from "@angular/forms";//自定義手機號碼組校驗 export function mobileAsyncValidator(control:FormControl):any{var myreg = /^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/; let valid = myreg.test(control.value);console.log("mobile的校驗結果是"+valid);//Observable.of返回一個流，.delay(5000)表示延遲5秒，用來模擬服務器響應時間return Observable.of(valid ? null : {mobile:{mobileErrDesc:"密碼和確認密碼不匹配"}}).delay(5000); }

reactiveForm.ts

constructor(fb:FormBuilder) {//定義數據模型this.formModel = fb.group({//預定義校驗username:['',[Validators.required,Validators.minLength(6)]],//異步校驗作為第3個構造函數mobile:['',this.mobileValidator,this.mobileAsyncValidator],passwordsGroup:fb.group({password:[''],pconfirm:['']},{validator:this.equalValidatir})});} <!--狀態字段pending=true表示正在進行校驗--> <div [hidden]="!formModel.get('mobile').pending">正在校驗手機合法性 </div>

?

4.模板式表單校驗?

終端輸入命令$ ng g directive directive/mobileValidator? 創建指令文件

將校驗方法定義成指令，如下

mobileValidator.directive.ts

import { Directive } from '@angular/core'; import { NG_VALIDATORS } from '@angular/forms'; import { mobileValidator } from '../validator/validator';//指令裝飾器 @Directive({selector: '[mobile]',//指令名稱//useValue:校驗方法名稱 ，multi:true：表示token為NG_VALIDATORS的提供器可對應多個useValueproviders:[{provide:NG_VALIDATORS,useValue:mobileValidator,multi:true}] }) export class MobileValidatorDirective {constructor() { } }

在模板中使用指令來校驗模板表單

templateForm.component.html

<!-- novalidate指令：不啟用瀏覽器默認的表單校驗，讓angualr的校驗指令不受干擾 --> <form #myForm = "ngForm" (ngSubmit) = "onSubmit(myForm.value,myForm.valid)" novalidate><!-- 使用angular預定義的指令required,minlength等來校驗表單 --><div>用戶名:<input ngModel required minlength="6" name="username" type="text"/></div><div ngModelGroup="passwordGroup" equal><div>密碼：<input ngModel type="password" name="password"/></div><div>確認密碼:<input ngModel type="password" name="confirmPass"/></div></div><!-- 定義input事件來控制是否顯示錯誤提示 --><div>電話：<input ngModel mobile name="mobile" type="text" (input)="onMobileInput(myForm)"/></div><!-- 接收模板的值判斷是否顯示錯誤提示 --><div [hidden]="mobileValid || mobileUntouched"><!-- 使用myForm.form獲取表單對象 --><div [hidden]="!myForm.form.hasError('mobile','mobile')">電話號碼不正確</div><div><div><input type="submit" value="提交"/></div> </form>

templateForm.component.ts

import { Component, OnInit } from '@angular/core'; import { NgForm } from '@angular/forms/src/directives/ng_form';@Component({selector: 'app-template-form',templateUrl: './template-form.component.html',styleUrls: ['./template-form.component.css'] }) export class TemplateFormComponent implements OnInit {constructor() { }ngOnInit() {}mobileValid:boolean=true;mobileUntouched:boolean=true;//點擊電話輸入框時，判斷mobile是否合法 onMobileInput(form:NgForm){if(form){this.mobileValid = form.form.get("mobile").valid;this.mobileUntouched = form.form.get("mobile").untouched;}}onSubmit(value:any,valid:boolean){console.log(valid);console.log(value);} }

?

轉載于:https://www.cnblogs.com/Caiyilong/p/8661171.html

總結

以上是生活随笔為你收集整理的angular4 表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。