模板式表單驗(yàn)證
(1) angular遇到form自動(dòng)接管，不想自動(dòng)接管，添加ngNoForm,當(dāng)標(biāo)簽為div時(shí)，但想被表單接管，添加ngForm;
(2) ngForm可以被模版本地變量引用，以便在模版中使用表單的實(shí)例。
找到所有的含有ngModel的元素添加到數(shù)據(jù)模型中-
myForm="ngForm" 通過(guò)#可以定義一個(gè)變量接管ngForm 模版本地變量通過(guò)#來(lái)聲明
NgForm => FormGroup
-
NgModel => FormControl 在ngForm指令里面使用ngModel不需要用括號(hào)括起來(lái)但是要指定一個(gè)name屬性
圖片.png -
NgModelGroup => 形成一個(gè)組 將下面的值包含在一個(gè)對(duì)象中
圖片.png angular中會(huì)阻止表單事件提交，通過(guò) (ngSubmit)來(lái)代替表單的提交
響應(yīng)式表單
FormControl
類(lèi)
FormGroup
將多個(gè)FormControl 的值放在一起 里面任何一個(gè)值無(wú)效的時(shí)候會(huì)報(bào)錯(cuò)
FormArray
類(lèi)似FormGroup 可以增長(zhǎng)的字段集合
以name結(jié)尾的這些指令只能放在formgroup的里面，不需要用[]進(jìn)行綁定， 不是以name結(jié)尾的要用[]進(jìn)行綁定
響應(yīng)式表單都是以form開(kāi)頭的只能在代碼中操作數(shù)據(jù)，
模版式表單是以ng開(kāi)頭的只能在模版中操作數(shù)據(jù)
構(gòu)建模型
使用FormBuilder配置表單模型
表單校驗(yàn)
-
自定義校驗(yàn)器
圖片.png
圖片.png
- 內(nèi)置校驗(yàn)器
-
可以將校驗(yàn)器作為構(gòu)造函數(shù)的參數(shù)傳入 可以有多個(gè)
圖片.png
使用校驗(yàn)器只有所有的都滿(mǎn)足了才返回true
在模版中使用校驗(yàn)器
指令 沒(méi)有模版的組件
指令作為屬性來(lái)使用
包裝指令
<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
<div class="form-group" [class.has-error]="!formModel.get('title').valid && formModel.get('title').touched">
<label for="productTitle">商品名稱(chēng):</label>
<input [class.has-error]="!formModel.get('title').valid || formModel.get('title').untouched" type="text" formControlName="title" class="form-control" id="productTitle" placeholder="商品名稱(chēng)">
<p class="help-block" [class.hidden]="!formModel.hasError('required','title')||formModel.get('title').untouched">用戶(hù)名是必填的</p>
<p class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">用戶(hù)名最小長(zhǎng)度是3</p>
</div>
<div class="form-group" [class.has-error]="!formModel.get('price').valid && formModel.get('price').touched">
<label for="productPrice">商品價(jià)格:</label>
<input type="text" formControlName="price" class="form-control" id="productPrice" placeholder="商品名稱(chēng)">
<p class="help-block" [class.hidden]="!formModel.hasError('required','price')||formModel.get('price').untouched">價(jià)格不能為空</p>
<p class="help-block" [class.hidden]="!formModel.hasError('positiveNum', 'price')">
請(qǐng)輸入正數(shù)
</p>
</div>
<div class="form-group">
<label for="productType">商品類(lèi)別：</label>
<select class="form-control" id="productType" formControlName="category">
<option value="-1">全部分類(lèi)</option>
<option value="1">衣服</option>
<option value="2">鞋子類(lèi)</option>
<option value="3">手機(jī)類(lèi)</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" [disabled]="!formModel.valid">搜索</button>
</div>
</form>
說(shuō)明： 在有has-error這個(gè)類(lèi)名下的 help-block 才會(huì)變紅
touched代表碰過(guò)默認(rèn)為false， untouched代表沒(méi)有碰過(guò)默認(rèn)為true
pristine 原始值默認(rèn)為true dirty臟值改變后的值默認(rèn)false
pendding 正在校驗(yàn)
import { ProductService } from 'src/app/servers/product.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
formModel: FormGroup;
constructor(private productService: ProductService) {
let fb = new FormBuilder()
this.formModel = fb.group({
title: ['', [Validators.minLength(3), Validators.required]],
price: [null, this.positiveNumValidator],
category: ['-1']
})
}
ngOnInit() {
}
positiveNumValidator(control: FormControl): any{
if(!control.value){
return null
}
let price = parseInt(control.value)
if(price > 0){
return
} else {
return {positiveNum: true}
}
}
onSearch(){
if(this.formModel.valid){
console.log(this.formModel.value)
}
}
}
補(bǔ)充：
關(guān)于響應(yīng)式表單中修改時(shí)禁用的問(wèn)題，
可以通過(guò)
this.formModel = this.$fb.group({
title: [{value: '', disabled: false}]
})
this.formModel.control['title'].disable() 禁用title 這個(gè)字段的輸入框
this.formModel.control['title'].enable() 啟用title這個(gè)字段的輸入框
