图片.png
模板式表单验证
(1) angular遇到form自动接管，不想自动接管，添加ngNoForm,当标签为div时，但想被表单接管，添加ngForm;
(2) ngForm可以被模版本地变量引用，以便在模版中使用表单的实例。
找到所有的含有ngModel的元素添加到数据模型中-
myForm="ngForm" 通过#可以定义一个变量接管ngForm 模版本地变量通过#来声明
NgForm => FormGroup
-
NgModel => FormControl 在ngForm指令里面使用ngModel不需要用括号括起来但是要指定一个name属性
图片.png -
NgModelGroup => 形成一个组 将下面的值包含在一个对象中
图片.png angular中会阻止表单事件提交，通过 (ngSubmit)来代替表单的提交
响应式表单
FormControl
类
FormGroup
将多个FormControl 的值放在一起 里面任何一个值无效的时候会报错
FormArray
类似FormGroup 可以增长的字段集合
图片.png
以name结尾的这些指令只能放在formgroup的里面，不需要用[]进行绑定， 不是以name结尾的要用[]进行绑定
响应式表单都是以form开头的只能在代码中操作数据，
模版式表单是以ng开头的只能在模版中操作数据
图片.png
图片.png
构建模型
使用FormBuilder配置表单模型
图片.png
表单校验
-
自定义校验器
图片.png
图片.png
- 内置校验器
-
可以将校验器作为构造函数的参数传入 可以有多个
图片.png
使用校验器只有所有的都满足了才返回true
图片.png
在模版中使用校验器
图片.png
图片.png
图片.png
图片.png
指令 没有模版的组件
指令作为属性来使用
包装指令
图片.png
<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')">
请输入正数
</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">手机类</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代表碰过默认为false， untouched代表没有碰过默认为true
pristine 原始值默认为true dirty脏值改变后的值默认false
pendding 正在校验
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)
}
}
}
补充：
关于响应式表单中修改时禁用的问题，
可以通过
this.formModel = this.$fb.group({
title: [{value: '', disabled: false}]
})
this.formModel.control['title'].disable() 禁用title 这个字段的输入框
this.formModel.control['title'].enable() 启用title这个字段的输入框
