表单（FormBuilder、验证器）

响应式表单FormBuilder

　　1、导入相应组件FormBuilder, FormControl

　　

　　

myForm: FormGroup;

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      // sku: ['', Validators.required]
      sku: ['ABC123']
    });
    this.sku = this.myForm.controls.sku;
  }

　　用有参构造器的方式来依赖注入FormBuilder。angular会自动注入formBulder对象。

在视图中使用myForm，

<h2 class="ui header">Demo Form: Sku with Builder</h2>

<form [formGroup]="myForm" class="ui form" (ngSubmit)="onSubmit($event, myForm.value)">

　　这里我们不希望使用外部有ngForm创建的FormGroup，而要使用FormBuilder创建的myForm这个变量

　　然后要把f.value变成myForm.value，将input换成

<input type="text" id="skuInput" placeholder="SKU" name="sku" [formControl]="myForm.controls['sku']">

　　

[formControl]="myForm.controls['sku']"    这个代码的意思是将myForm里面名为sku的control绑定到input标签上，也就是说如果去掉name属性也能绑定上去。

添加验证：使用Vlidators模块

　　Vlidators.required是最简单的验证，表明是必填项

　　在组件中为FormControl添加验证

　　

myForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      sku: ['', Validators.required]
      //sku: ['', Validators.compose([Validators.required, skuValidators])]
    });
    this.sku = this.myForm.controls.sku;
  }

　　模板视图中:

<div *ngIf="sku.invalid" >SKU is invalid</div>

<div *ngIf="sku.hasError('required')" >SKU is required</div>

<div *ngIf="myForm.invalid" >Form is invalid</div>

　　自定义验证器：

　　　　便携验证器在FormBuilderDemoComponent中

　　　　

　　　　sku: ['', Validators.compose([Validators.required, skuValidators])]中

　　　　Validators.compose代表多个验证

　　整合

<div class="ui raised segment">
  <h2 class="ui header">Demo Form: Sku with Builder</h2>
  <form [formGroup]="myForm" class="ui form" (ngSubmit)="onSubmit($event, myForm.value)">

    <div class="field" [class.error]="!sku.valid && sku.touched">
      <label for="skuInput">SKU</label>
      <input type="text" id="skuInput" placeholder="SKU" name="sku" [formControl]="sku">
      <div *ngIf="sku.invalid" >SKU is invalid</div>
      <div *ngIf="sku.hasError('required')" >SKU is required</div>
      <div *ngIf="sku.hasError('invalidSku')" >SKU must begin 123</div>
    </div>

    <div *ngIf="myForm.invalid" >Form is invalid</div>
    <button type="submit" class="ui button">Submit</button>
  </form>
</div>

　　

import {Component, OnInit} from '@angular/core';
import {
  AbstractControl,
  FormBuilder, FormControl, FormGroup, Validators
} from '@angular/forms';

@Component({
  selector: 'app-form-builder-demo',
  templateUrl: './form-builder-demo.component.html',
  styleUrls: ['./form-builder-demo.component.css']
})
export class FormBuilderDemoComponent implements OnInit {
  myForm: FormGroup;
  sku: AbstractControl;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      // sku: ['', Validators.required]
      sku: ['', Validators.compose([Validators.required, skuValidators])]
    });
    this.sku = this.myForm.controls.sku;
  }

  ngOnInit() {
  }

  onSubmit(obj: any, value: string): void {
    console.log('you submitted value:', value);
  }
}

function skuValidators(control: FormControl): {[s: string]: boolean} {
  if(!control.value.match(/^123/)){
    return {invalidSku: true};
  }
}