Angular 响应式表单 基础例子
栏目: JavaScript · 发布时间: 5年前
内容简介:表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能本案例中使用了响应式表单,响应式表单在表单的校验方面非常方便要使用响应式表单,就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。
1、案例需求
表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能
2、代码分析
本案例中使用了响应式表单,响应式表单在表单的校验方面非常方便
2.1、注册 ReactiveFormsModule
要使用响应式表单,就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。
app.module.ts
imports: [ BrowserModule, AppRoutingModule, ReactiveFormsModule ]
2.2、使用 FormBuilder 来生成表单控件
当需要与多个表单打交道时,手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例,只是用起来更简单。
- 注入 FormBuilder 服务
constructor( private fb: FormBuilder ) { }
- 生成表单控件
FormBuilder 提供了一个语法糖,以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。它会减少构建复杂表单时所需的样板代码的数量(new FormControl)。
this.formGroup = this.fb.group({ name: '', age: '', sex: '' });
2.3、FormGroupDirective
formGroup 是一个输入指令,它接受一个 formGroup 实例,它会使用这个 formGroup 实例去匹配 FormControl、FormGroup、FormArray 实例,所以模版中的 fromControlName 必须和 formGroup 中的 name 匹配。
<form [formGroup]="formGroup" (ngSubmit)="submit()" novalidate> <div class="form-group"> <label>姓名:</label> <input type="text" formControlName="name"> <p>{{nameErrorMessage}}</p> </div> </form>
2.3、表单状态
每个表单控件都有自己的状态,共五个状态属性,都是布尔值。
- valid 表单值是否有效
- pristine 表单值是否未改变
- dirty 表单值是否已改变
- touched 表单是否已被访问过
- untouched 表单是否未被访问过
以输入姓名的表单为例,只验证该表单的必填项时。表单先获取焦点并且输入姓名,最后移除焦点,每一步表单的状态如下:
初始状态 | |
---|---|
状态 | 值 |
valid | false |
pristine | true |
dirty | false |
touched | false |
untouched | true |
输入状态 | |
---|---|
状态 | 值 |
valid | true |
pristine | false |
dirty | true |
touched | false |
untouched | true |
失去焦点后状态 | |
---|---|
状态 | 值 |
valid | true |
pristine | false |
dirty | true |
touched | true |
untouched | true |
2.4、表单校验
表单验证用于验证用户的输入,以确保其完整和正确。Angular内置的了一些校验器,如 Validators.required, Validators.maxlength,Validators.minlength, Validators.pattern,但是不能自定义错误提示信息,所以实用性不强,满足不了业务场景的需求,于是我们可以自定义表单校验器。
自定义表单校验器
name-validator.ts
import { AbstractControl, ValidatorFn } from '@angular/forms'; export function nameValidator(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { if (!control.value) { return { message: '请输入必选项' }; } if (control.value.length > 10) { return { message: '名称大于10位了' }; } return null; }; }
使用自定义验证器
app.component.ts
this.formGroup = this.fb.group({ name: ['', nameValidator()], age: ['', ageValidator()], sex: ['', sexValidator()] });
显示错误提示信息
当页面初始化的时候不应该显示错误信息,也就是表单touched为true
// Error private errorMessage(name): string { const control = this.formGroup.controls[name]; return (control.touched && control.invalid) ? control.errors.message : ''; }
然而touched只有失去焦点才为true,在输入的时候一直为false。导致在输入的时候,表单校验错误,却显示不了错误信息。因此需要再次判断 dirty 状态,只要表单值改变,则为false
private errorMessage(name): string { const control = this.formGroup.controls[name]; return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : ''; }
2.5、markAsTouched
未对表单操作时,点击提交按钮时,则模拟表单被touched,显示提示信息
markFormGroupTouched(formGroup: FormGroup) { Object.values(formGroup.controls).forEach(item => { if (item.controls) { // 当 formGroup中存在 formGroup 时,递归 this.markFormGroupTouched(item.controls); } else { item.markAsTouched(); } }); }
以上所述就是小编给大家介绍的《Angular 响应式表单 基础例子》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 细说 Angular 2+ 的表单(二):响应式表单
- Angular 响应式表单之下拉框
- 灵雀云前端: Angular 响应式表单
- 表单 – 避免Symfony强制显示表单字段
- 8款最新CSS3表单 环形表单很酷
- 动态表单 form-create 2.5 版本来啦,帮你轻松搞定表单
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。