angular4 表单

模板表单

在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表单。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [],
  declarations: []
})
export class AppModule { }

在表单上添加的ngForm会拦截标准的hmlt表单提交事件。

ngModel和FormControl

1. 在表单元素中添加了ngmodel属性，这代表着创建了一个FormControl控件。
2. 将第一步中的控件放至form中,Form会自动将该FormControl控件注册为Form的子控件。只有表单元素上在添加了ngModel的基础上再添加name属性，才会将name=“nickname”的字段添加至表单控件上。
   例：

    <form #myForm="ngForm">
        <input ngModel name="nickname" type="text">
    </form>
    {{myForm.value | json}}         //这里将以{{"nickname": xxx}}输出input输入框中的内容

1. 单向数据绑定

   具体使用`[ngModel]="xxx"`

2. 双向数据绑定

   具体使用`[(ngModel)]="xxx"`
   

ngModelGroup

简单来说，是一组 FormControl

响应式表单

响应式表单中一些常用的类

1. AbstractControl是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性，其中有些是可观察对象（Observable）。
2. FormControl 用于跟踪一个单独的表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。
3. FormGroup用于 跟踪一组AbstractControl的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup。
4. FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

具体使用

在使用响应式表单之前，也需要在app.module中添加import。

import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
  // 省略其他
    imports: [..., ReactiveFormsModule],
  // 省略其他
})
// 省略其他

区别：响应式表单与模板表单最大的区别在于响应式表单并不是直接地将form中的value直接绑定在html中的标签上，而是只是简单地声明了一下formControlName，再在component上将对应的formControlName的表单元素实例化FormControl

ngOnInit() {
    // 初始化表单
    this.user = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.pattern(/([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}/)]),
      password: new FormControl('', [Validators.required]),
      repeat: new FormControl('', [Validators.required]),
      address: new FormGroup({
        province: new FormControl(''),
        city: new FormControl(''),
        area: new FormControl(''),
        addr: new FormControl('')
      })
    });
}

FomBuilder

FormBuilder的存在就是为了能够快速构建表单。具体使用形式：

constructor(private fb: FormBuilder) {}

ngOnInit() {
    // 初始化表单
    this.user = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
      repeat: ['', Validators.required],
      address: this.fb.group({
        province: [],
        city: [],
        area: [],
        addr: []
      })
    });
}

表单验证

目前Angular支持的内置validate属性：

• required - 设置表单控件值是非空的
• email - 设置表单控件的格式是email
• minlength - 设置表单控件值的最小长度
• maxlength - 设置表单控件长度的最大值
• pattern - 设置表单控件的值需匹配 pattern 对应的模式

如何判断验证的结果

通过表单控件的.valid判断验证结果，其结果状态：

• valid - 有效
• invalid - 无效
• pristine - 表单值未改变
• dirty - 表单值已改变
• touched - 表单控件已被访问过
• untouched - 表单控件未被访问过

如果显示验证失败的信息

1. 可以直接在html中编写验证信息，通过设置[hidden]="!formModel.hasError('验证结果')"属性来显示。
2. 在表单所在的component中的fomModel上添加{validator: xxxValidat0or}，再在指定的xxxValidator验证方法中调用description来显示验证失败信息。
   例：{password: {description: "密码和确认密码不匹配"}}

如何添加验证信息的样式

可以通过以下类选择器添加相应的样式：

• .ng-valid
• .ng-invalid
• .ng-pristine
• .ng-dirty
• .touched
• .untouched

作者：navk

来源：https://segmentfault.com/a/1190000011357579