大纲
1、模板驱动表单的创建
2、响应式表单的创建
3、模板驱动型表单的自定义指令
4、响应式表单的自定义指令
5、父组件向子组件传递表单控制
6、代码素材
模板驱动表单的创建
//1、在根模块注入依赖模块
import { FormsModule } from '@angular/forms';
//2、在模板中创建表单控件
<form>
<div class="form-group">
<label class="center-block">Name1:
<input class="form-control">
</label>
</div>
<div class="form-group">
<label class="center-block">Age1:
<input class="form-control">
</label>
</div>
</form>
//3、在模板中添加ngModel同步数据
//4、数据校验：模板型表单的数据校验是写在模板上的，
//将require、minlength等校验规则写在模板上，从而定义对应表单控件的校验规则
//5、表单的提交，可以通过提交被监控的表单的值来达到表单的提交
//6、可以自定义设置表单数据的校验
响应式表单的创建
//1、在根模块注入依赖模块，引入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
//2、在模板中创建form表单
//3、在组件中创建响应式表单控制器
ReactiveForm = new FormGroup({
age: new FormControl('',[Validators.required])
});
//4、监控表单的值的变化
/*
a：数据模型的值的变化：这里同样需要ngModel来绑定数据模型和表单模型的值，
不过需要注意的是，如果用ngModel来绑定表单控件，
那么通过new FormControl设置的默认值可能就会被ngModel的默认值给覆盖了
b：表单模型的值的变化：可以通过监控{{ReactiveForm.value.age}}来监控值的变化
*/
//5、数据的校验
/*
各个表单控件的数据的校验是需要通过FormControl来设置的，
可以看到每个new FormControl后都可以对各个表单控件进行数据的校验。
*/
//6、表单的提交
/*
(ngSubmit)="onSubmit(user)"通过ngSumbit即可实现表单数据的提交，
user是表单的名字，即：[formGroup]="user"
*/
//7、可以自定义设置表单数据的校验
模板驱动型表单的自定义指令
模板型表单校验需要通过模板中添加属性才可以添加验证，所以需要继承指令Directive，在Directive中定义元数据并添加一系列的自定义的表单校验规则。
/**
equalCrk.direvtive.ts
使用：
<input name="nickName" id="nickName" [(ngModel)]='nickName' validateCrk>
当输入的数据不是crk的时候，表单的校验是不会通过的
**/
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
@Directive({
selector: '[validateCrk][ngModel]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => CrkValidatorDirective),
multi: true
}
]
})
export class CrkValidatorDirective implements Validator {
constructor(
@Attribute('validateCrk') public validateCrk: string) {
}
validate(c: AbstractControl): { [key: string]: any } {
// 控件自身值
const self = c.value;
// 控件的值是否等于'crk'
if (self !== 'crk') {
return {
validateCrk: true
};
}
return null;
}
}
响应式表单的自定义指令
响应式的自定义校验相对来说较简单，需要满足ValidatorFn即可。
/**
响应式表单自定义指令
使用：
{validator: [this.validateEqualCrk('nickName','gg')]}
*/
validateEqualCrk(confirmKey: string, confirmStr?:string): ValidatorFn {
return (group: FormGroup): {[key: string]: any} => {
const confirmField = group.controls[confirmKey];
const pattenStr = confirmStr ? confirmStr : 'crk'
if (confirmField.value !== pattenStr) {
return {
validateEqualCrk: true
};
}
return null;
};
}
父组件向子组件传递表单控制
当表单中某个字段是以子组件的形式出现的时候，不能直接设置FormControl，因此需要向子组件传递FormControl然后在子组件添加，这样才可以实现父组件表单对子组件表单元素的控制。
代码素材
你可以在以下git代码中找到我上述讲述的知识点的实例代码（angular的实例代码中的angular-form）代码中对如何创建模板驱动型表单，响应式表单、使用FormBuilder创建响应式表单、创建自定义指令（响应式表单的和模板驱动表单的自定义指令都有）以及深层次传递表单控制等知识点都有涉及到。
网友评论