Angular Form 之 响应式表单

　　Angular 中有两种表单：

　　　　1、 响应式表单

　　　　2、模版驱动式表单（Template Driven Forms ）

准备工作　

　　　　1、从 @angular/forms 导入 ReactiveFormsModule，FormsModule 并添加到 app.module 中。

　　　　2、在组件中  import {FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms' 。

基本概念

　　　　1、FormControl

　　　　　　 单个表单控件模块，用于跟踪控件的值和验证状态。

　　　　　　 语法格式如下： 

 constructor(formState?: any, 
　　　　　　　　validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, 
　　　　　　　　asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);

　　　　　　

<form novalidate>
    <input type="text" [formControl]="name">
</form>

.ts
    name = new FormControl('herry');

　　　　2、FormGroup

　　　　　　  管理一组FormControl实例的表单状态。

　　　　　      在HTML模版中，顶级 group 需要使用  [formGrop] 指定在TS中定义的FromGroup；

　　　　　　　　　　　　　　   第二级group 需要 用 fromGroupName 指定 嵌套的FromGroup名称；

　　　　　　　　　　　　　　　而相应的 FormControl 则不再使用 [fromControl] ,而是使用 formControlName 指定。 　　　　　

<form novalidate [formGroup]="userForm" (ngSubmit)="save()">
  <div>name: <input type="text" formControlName="name"></div>
  <div formGroupName="course">
    courseName:<input type="text" formControlName="courseName">
    score: <input type="text" formControlName="score">
  </div>
  <button type="submit">Submit</button>
</form>

.ts 
　　userForm = new FormGroup({
    　　name: new FormControl(''),
    　　course: new FormGroup({
      　　courseName: new FormControl(''),
      　　score: new FormControl('')
    　　})
  　　});

　　　　如何获取各个 FromControl的值呢？

　　　　　  this.userForm.value 即可

course:
    courseName: "chinese"
    score: "100"
name: "herry"

 

　　　　3、FormBuilder

　　　　　　  一个可注入的服务器提供商，提供了便捷方法来生成表单控件。

　　　　　　 上面的例子可以如下改写：

constructor(private fb: FormBuilder) { }

userForm = this.fb.group({
    name: [''],
    course: this.fb.group({
      courseName: [''],
      score: ['']
    })
  });

　表单验证　　　　　　

　　响应式表达包含了一组开箱即用的常用验证器函数，这些函数接受一个控件；

　　验证并返回一个错误对象或空值。

 userForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(5)]],
    course: this.fb.group({
      courseName: [],
      score: ['', Validators.required]
    })
  });

　　　以上验证 name 必填，最小长度为5个字符。

　　修改下HTML模版，当验证不过时界面可以友好提示。如下：

<form novalidate [formGroup]="userForm" (ngSubmit)="save()">
  <div>name: <input type="text" formControlName="name"></div>
  <div formGroupName="course">
    courseName:<input type="text" formControlName="courseName" required>
    score: <input type="text" formControlName="score">
  </div>

  <div *ngIf="userForm.get('name').hasError('required') && userForm.get('name').touched">
    学生名称是必须的
  </div>

  <div *ngIf="userForm.get('name').hasError('minlength') &&userForm.get('name').touched">
    学生名称字数不够
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

　　

 小知识：

　　通常情况下，我们需要为每个form都添加 novalidate 属性，该属性用于禁止浏览器 native 表单验证。

　　需要开启 native表单验证，添加 ngNativeValidate属性。