Angular表单解析
angular中表单分为两种,一种是是模板驱动表,一种是响应式表单。以下分别对模板驱动表单,响应式表单的使用,表单的验证做示例。
1. 模板驱动型表单
1.1模板表单的使用
要使用模板驱动行表单首先需要在根模块下面引入formsmodule,然后将formsmodule模块导入到根模块的ngmodule中的imports数组中,这样才能够就能访问模板驱动表单的所有特性,包括 ngmodel
模块的引用
import { browsermodule } from '@angular/platform-browser'; import { ngmodule } from '@angular/core'; import { formsmodule } from '@angular/forms'; import { reactiveformsmodule } from '@angular/forms'; import { routes, routermodule } from '@angular/router'; import { appcomponent } from './app.component'; import { logincomponent } from './login/login.component'; import { reactiveformcomponent } from './reactive-form/reactive-form.component'; import { heroformcomponent } from './hero-form/hero-form.component'; import { righsterformcomponent } from './righster-form/righster-form.component'; const routes: routes = [ { path: 'heroform', component: heroformcomponent }, { path: 'loginform', component: logincomponent }, { path: 'reactiveform', component: reactiveformcomponent }, { path: 'registerform', component: righsterformcomponent }, { path: '', redirectto: 'heroform', pathmatch: 'full' } ]; @ngmodule({ declarations: [ appcomponent, logincomponent, reactiveformcomponent, heroformcomponent, righsterformcomponent ], imports: [ browsermodule, formsmodule, reactiveformsmodule, routermodule.forroot(routes) ], providers: [], bootstrap: [appcomponent] }) export class appmodule { }
1.2模板表单的详细介绍
新建一个login用来写一个注册的模板表单
其中模板为
{{ myform.value | json }}
ngform:angular 会在
再举一个使用formbulider服务创建表单控件的例子,生成一个注册组件
import { component, oninit } from '@angular/core'; import {formgroup, formbuilder, formcontrol, validators } from '@angular/forms'; import { mobilevalidator, equalvalidator } from '../validator/validators'; @component({ selector: 'app-righster-form', templateurl: './righster-form.component.html', styleurls: ['./righster-form.component.css'] }) export class righsterformcomponent implements oninit { rigisterform: formgroup; iscansubmit: boolean; constructor(private fb: formbuilder) { } ngoninit() { this.createform(); } createform() { this.rigisterform = this.fb.group({ username: ['', [validators.required, validators.minlength(6)]], mobile: ['', mobilevalidator], passwordgroup: this.fb.group({ password: ['', [validators.minlength(6)]], pconfirm: [''] }, {validator: equalvalidator}) }); } // 提交 onsubmit() { const isvalid: boolean = this.rigisterform.get('username').valid; // console.log(isvalid); // console.log( this.rigisterform.get('username')); if (this.rigisterform.valid) { console.log(this.rigisterform.value); } } }
其中关于验证的可以先忽略;
模板代码:
用户注册
{{ rigisterform.status }}
可以使用rigisterform.get(formcontrolname).value获取每个控件的值,
rigisterform.value可以获取整个表单的数据
rigisterform.status可以获取表单验证是否通过,是表单所有的验证规则。
3.表单验证
3. 1模板驱动验证
为了往模板驱动表单中添加验证机制,你要添加一些验证属性,就像原生的 html 表单验证器。 angular 会用指令来匹配这些具有验证功能的指令。
每当表单控件中的值发生变化时,angular 就会进行验证,并生成一个验证错误的列表(对应着 invalid 状态)或者 null(对应着 valid 状态)。
eg:
name is required.
name must be at least 4 characters long.
name cannot be bob.
3.2响应式表单验证
在响应式表单中,真正的都在组件类中。不应该通过模板上的属性来添加验证器,而应该在组件类中直接把验证器函数添加到表单控件模型上(formcontrol)。然后,一旦控件发生了变化,angular 就会调用这些函数。
验证器函数
有两种验证器函数:同步验证器和异步验证器。
同步验证器函数接受一个控件实例,然后返回一组验证错误或 null。你可以在实例化一个 formcontrol 时把它作为构造函数的第二个参数传进去。 异步验证器函数接受一个控件实例,并返回一个承诺(promise)或可观察对象(observable),它们稍后会发出一组验证错误或者 null。你可以在实例化一个 formcontrol 时把它作为构造函数的第三个参数传进去。上面2.2中最后一个例子使用的就是响应式表单验证。
自定义验证器,2.2最后一个例子就有两个自定义验证器,mobilevalidator和equalvalidator分别验证手机号和密码,自定义验证器代码如下:
import {formgroup, formcontrol } from '@angular/forms'; export function mobilevalidator(control: formcontrol): any { const myreg = /^1[0-9]{10}$/; const valid = myreg.test(control.value); console.log('mobile的校验值为' + valid); return valid null : { mobile: true }; } export function equalvalidator(group: formgroup): any { const pass = group.get('password') as formcontrol; const pconfirm = group.get('pconfirm') as formcontrol; const valid: boolean = (pass.value === pconfirm.value); console.log('密码校验结果' + valid); return valid null : { equal: true }; }
自定义表单添加到响应式表单中很简单,直接把这个函数放到formcontrol就行了。
添加到模板驱动表单
在模板驱动表单中,你不用直接访问 formcontrol 实例。所以不能像响应式表单中那样把验证器传进去,而应该在模板中添加一个指令。
上一篇: mvvm是什么