angular的表单
angular的表单分为两种，一种是响应式的表单，另一种是模板驱动表单。使用库中的formgroup, formcontrol，formarray,formbuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中，我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用 formgroup,formgroupname,formcontrolname等将数据和视图进行绑定(需要引入reactiveformsmodule)。
我要评论
//ts
profileform = new formgroup({
firstname: new formcontrol(''),
lastname: new formcontrol(''),
address: new formgroup({
street: new formcontrol(""),
city: new formcontrol(""),
state: new formcontrol(""),
zip: new formcontrol("")
})
})
//html
<input type="text" formcontrolname="firstname">
模板驱动的表单是我们实例化好一个类的数据之后，在html中使用 ngform 指令后将数据和表单进行绑定,使用[(ngmodel)]来将表单的数据和和视图进行双向绑定，ngform 指令为 form 增补了一些额外特性。 它会控制那些带有 ngmodel 指令和 name 属性的元素，监听他们的属性。
//html
<form #heroform="ngform" appidentityrevealed (ngsubmit)="onsubmit()">
<div >
<label for="name">name</label>
<input type="text" id="name" required [(ngmodel)]="model.name" [ngmodeloptions]="{updateon: 'blur'}" name="name">
<div >
<label for="power">hero power</label>
<select id="power" class="form-control" required [(ngmodel)]="model.power" name="power">
<option *ngfor="let power of powers" [value]="power">{{power}}</option>
</select>
</div>
<button type="button" (click)="newhero();heroform.reset()">
new hero
</button>
<button type="submit" [disabled]="!heroform.form.valid">
submit
</button>
</form>
//ts
model = new hero(18, 'dr iq', this.powers[0], 'chuck overstreet');
响应式表单
响应式的表单中，添加校验逻辑是以返回一个validatorfn类的函数实现的
function forbiddennamevalidator(value: string): validatorfn {
return (control: abstractcontrol): { [key: string]: any } | null => {
const rule = new regexp(value,'i');//设定验证规则,i是忽略大小写的意思
const result = rule.test(control.value);//control.value是输入框的值,forbidden是正则结果
return result ? { 'forbiddenname': { value: control.value } } : null;//如果匹配成功,则返回对象
};
}
firstname:['',[forbiddennamevalidator('bob')]],
模板驱动表单
模板驱动的表单中，添加校验逻辑是以指令方式实现的
//ts
import { directive, input } from '@angular/core';
import { abstractcontrol, ng_validators, validator, validatorfn, validationerrors } from '@angular/forms';
import { formgroup } from '@angular/forms';
export function forbiddennamevalidator(namere: regexp): validatorfn {
return (control: abstractcontrol): { [key: string]: any } | null => {
const forbidden = namere.test(control.value);
return forbidden ? { 'forbiddenname': { value: control.value } } : null;
};
}
@directive({
selector: '[appforbiddenname]',
providers: [{ provide: ng_validators, useexisting: forbiddenvalidatordirective, multi: true }]
})
export class forbiddenvalidatordirective implements validator {
@input('appforbiddenname') forbiddenname: string;
validate(control: abstractcontrol): { [key: string]: any } | null {
return this.forbiddenname ? forbiddennamevalidator(new regexp(this.forbiddenname, 'i'))(control)
: null;
}
}
//html
<input type="text" required [(ngmodel)]="model.name" name="name" appforbiddenname="bob">
总结
响应式表单需要引入reactiveformsmodule模块，在使用时需要引入大量的指令，使用麻烦，但是添加校验逻辑简单，用户可以动态添加新的输入域，适合非固定的表单。
模板驱动的表单中，表单的数据生成很简单，在html中需要双向绑定，并且配上name属性，添加校验时要是用指令的方式，适合固定的输入表单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论