模板式表單驗(yàn)證
(1) angular遇到form自動接管，不想自動接管，添加ngNoForm,當(dāng)標(biāo)簽為div時，但想被表單接管，添加ngForm;
(2) ngForm可以被模版本地變量引用，以便在模版中使用表單的實(shí)例。
找到所有的含有ngModel的元素添加到數(shù)據(jù)模型中-
myForm="ngForm" 通過#可以定義一個變量接管ngForm 模版本地變量通過#來聲明
NgForm => FormGroup
-
NgModel => FormControl 在ngForm指令里面使用ngModel不需要用括號括起來但是要指定一個name屬性
圖片.png -
NgModelGroup => 形成一個組 將下面的值包含在一個對象中
圖片.png angular中會阻止表單事件提交，通過 (ngSubmit)來代替表單的提交
響應(yīng)式表單
FormControl
類
FormGroup
將多個FormControl 的值放在一起 里面任何一個值無效的時候會報錯
FormArray
類似FormGroup 可以增長的字段集合
以name結(jié)尾的這些指令只能放在formgroup的里面，不需要用[]進(jìn)行綁定， 不是以name結(jié)尾的要用[]進(jìn)行綁定
響應(yīng)式表單都是以form開頭的只能在代碼中操作數(shù)據(jù)，
模版式表單是以ng開頭的只能在模版中操作數(shù)據(jù)
構(gòu)建模型
使用FormBuilder配置表單模型
表單校驗(yàn)
-
自定義校驗(yàn)器
圖片.png
圖片.png
- 內(nèi)置校驗(yàn)器
-
可以將校驗(yàn)器作為構(gòu)造函數(shù)的參數(shù)傳入 可以有多個
圖片.png
使用校驗(yàn)器只有所有的都滿足了才返回true
在模版中使用校驗(yàn)器
指令 沒有模版的組件
指令作為屬性來使用
包裝指令
<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
<div class="form-group" [class.has-error]="!formModel.get('title').valid && formModel.get('title').touched">
<label for="productTitle">商品名稱:</label>
<input [class.has-error]="!formModel.get('title').valid || formModel.get('title').untouched" type="text" formControlName="title" class="form-control" id="productTitle" placeholder="商品名稱">
<p class="help-block" [class.hidden]="!formModel.hasError('required','title')||formModel.get('title').untouched">用戶名是必填的</p>
<p class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">用戶名最小長度是3</p>
</div>
<div class="form-group" [class.has-error]="!formModel.get('price').valid && formModel.get('price').touched">
<label for="productPrice">商品價格:</label>
<input type="text" formControlName="price" class="form-control" id="productPrice" placeholder="商品名稱">
<p class="help-block" [class.hidden]="!formModel.hasError('required','price')||formModel.get('price').untouched">價格不能為空</p>
<p class="help-block" [class.hidden]="!formModel.hasError('positiveNum', 'price')">
請輸入正數(shù)
</p>
</div>
<div class="form-group">
<label for="productType">商品類別：</label>
<select class="form-control" id="productType" formControlName="category">
<option value="-1">全部分類</option>
<option value="1">衣服</option>
<option value="2">鞋子類</option>
<option value="3">手機(jī)類</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" [disabled]="!formModel.valid">搜索</button>
</div>
</form>
說明： 在有has-error這個類名下的 help-block 才會變紅
touched代表碰過默認(rèn)為false， untouched代表沒有碰過默認(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)式表單中修改時禁用的問題，
可以通過
this.formModel = this.$fb.group({
title: [{value: '', disabled: false}]
})
this.formModel.control['title'].disable() 禁用title 這個字段的輸入框
this.formModel.control['title'].enable() 啟用title這個字段的輸入框
