angular表单的使用实例

原文

https://www.jianshu.com/p/da1fd5396798

大纲

　　1、模板驱动表单的创建
　　2、响应式表单的创建
　　3、模板驱动型表单的自定义指令
　　4、响应式表单的自定义指令
　　5、父组件向子组件传递表单控制
　　6、代码素材

模板驱动表单的创建

//1、在根模块注入依赖模块
import { FormsModule }   from '@angular/forms';
//2、在模板中创建表单控件
<form>
  <div class="form-group">
    <label class="center-block">Name1:
      <input class="form-control">
    </label>
  </div>
  <div class="form-group">
    <label class="center-block">Age1:
      <input class="form-control">
    </label>
  </div>
</form>
//3、在模板中添加ngModel同步数据
//4、数据校验：模板型表单的数据校验是写在模板上的，
//将require、minlength等校验规则写在模板上，从而定义对应表单控件的校验规则
//5、表单的提交，可以通过提交被监控的表单的值来达到表单的提交
//6、可以自定义设置表单数据的校验

响应式表单的创建

//1、在根模块注入依赖模块，引入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
//2、在模板中创建form表单
//3、在组件中创建响应式表单控制器
ReactiveForm = new FormGroup({
    age: new FormControl('',[Validators.required])
});
//4、监控表单的值的变化
/*
a：数据模型的值的变化：这里同样需要ngModel来绑定数据模型和表单模型的值，
不过需要注意的是，如果用ngModel来绑定表单控件，
那么通过new FormControl设置的默认值可能就会被ngModel的默认值给覆盖了
b：表单模型的值的变化：可以通过监控{{ReactiveForm.value.age}}来监控值的变化
*/
//5、数据的校验
/*
  各个表单控件的数据的校验是需要通过FormControl来设置的，
  可以看到每个new FormControl后都可以对各个表单控件进行数据的校验。
*/
//6、表单的提交
/*
(ngSubmit)="onSubmit(user)"通过ngSumbit即可实现表单数据的提交，
user是表单的名字，即：[formGroup]="user"
*/
//7、可以自定义设置表单数据的校验

模板驱动型表单的自定义指令

　　模板型表单校验需要通过模板中添加属性才可以添加验证，所以需要继承指令Directive，在Directive中定义元数据并添加一系列的自定义的表单校验规则。

/**
  equalCrk.direvtive.ts
  使用：
  <input name="nickName" id="nickName" [(ngModel)]='nickName' validateCrk>
  当输入的数据不是crk的时候，表单的校验是不会通过的
**/
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[validateCrk][ngModel]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CrkValidatorDirective),
      multi: true
    }
  ]
})
export class CrkValidatorDirective implements Validator {
  constructor(
    @Attribute('validateCrk') public validateCrk: string) {
  }
  validate(c: AbstractControl): { [key: string]: any } {
    // 控件自身值
    const self = c.value;
    // 控件的值是否等于'crk'
    if (self !== 'crk') {
      return {
        validateCrk: true
      };
    }
    return null;
  }
}

响应式表单的自定义指令

　　响应式的自定义校验相对来说较简单，需要满足ValidatorFn即可。

/**
    响应式表单自定义指令
    使用：
     {validator: [this.validateEqualCrk('nickName','gg')]}
*/
validateEqualCrk(confirmKey: string, confirmStr?:string): ValidatorFn {
  return (group: FormGroup): {[key: string]: any} => {
    const confirmField = group.controls[confirmKey];
    const pattenStr = confirmStr ? confirmStr : 'crk'
    if (confirmField.value !== pattenStr) {
      return {
        validateEqualCrk: true
      };
    }
      return null;
  };
}

父组件向子组件传递表单控制

　　当表单中某个字段是以子组件的形式出现的时候，不能直接设置FormControl，因此需要向子组件传递FormControl然后在子组件添加，这样才可以实现父组件表单对子组件表单元素的控制。

代码素材

　　你可以在以下git代码中找到我上述讲述的知识点的实例代码（angular的实例代码中的angular-form）代码中对如何创建模板驱动型表单，响应式表单、使用FormBuilder创建响应式表单、创建自定义指令（响应式表单的和模板驱动表单的自定义指令都有）以及深层次传递表单控制等知识点都有涉及到。