Angular相应式表单基本例子

表单提交，表单悉数校验胜利才提交，当表单校验毛病，表单边框变红，同时有毛病提醒信息，有重置功用

• 在线预览
• git堆栈

本案例中运用了相应式表单，相应式表单在表单的校验方面异常轻易

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）。

formGroup: FormGroup;
this.formGroup = this.fb.group({
name: '',
age: '',
sex: ''
});

2.3、FormGroupDirective

formGroup 是一个输入指令，它接收一个 formGroup 实例，它会运用这个 formGroup 实例去婚配 FormControl、FormGroup、FormArray 实例，所以模版中的 formControlName 必需和 formGroup 中的 name 婚配。

2.4、表单状况

每一个表单控件都有本身的状况，共五个状况属性，都是布尔值。

• valid 表单值是不是有用
• pristine 表单值是不是未转变
• dirty 表单值是不是已转变
• touched 表单是不是已被访问过
• untouched 表单是不是未被访问过

以输入姓名的表单为例，只考证该表单的必填项时。表单先猎取核心而且输入姓名，末了移除核心，每一步表单的状况以下：

2.5、表单校验

表单考证用于考证用户的输入，以确保其完全和准确。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.6、markAsTouched

未对表单操纵时，点击提交按钮时，则模仿表单被touched，显现提醒信息

markFormGroupTouched(formGroup: FormGroup) {
(Object).values(formGroup.controls).forEach(item => {
if (item.controls) {
this.markFormGroupTouched(item);
} else {
item.markAsTouched();
}
});
}