监听表单变化

FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。
要监听控件的变化，我们通过以下步骤：

1. 通过调用control.valueChanges访问这个EventEmitter
2. 然后调用.subscribe方法添加一个监听器。

html代码如下

<nz-card style="width:300px;">
    <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)">
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']">
                <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag>
                <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')">
                    <i nz-icon nzType="close-circle"></i>
                    <span>error</span>
                  </nz-tag>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <button type="submit" nz-button class="primary">Submit</button>
        </nz-form-item>
    </form>
</nz-card>

ts代码如下

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

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

  myForm: FormGroup

  constructor(formBuilder: FormBuilder) {

    this.myForm = formBuilder.group({})
    let formControl: FormControl = new FormControl("", Validators.compose(
      [Validators.required, this.skuValidator]
    ))
    this.myForm.addControl("sku", formControl)
    formControl.valueChanges.subscribe((value: string) => {
      console.warn('值改变' + value)
    })
    this.myForm.valueChanges.subscribe((form: any) => {
      console.warn('表单改变：' + JSON.stringify(form))
    })
  }

  ngOnInit(): void {
  }

  onSubmit(form: any): void {
    debugger
    this.myForm.controls['sku']
    console.log(form)
  }

  skuValidator(formControl: FormControl): { [s: string]: boolean } {
    if (!formControl.value.match(/^123/)) {
      return { invalidSku: true }
    }
    return { invalidSku: false }
  }

}

双向数据绑定

ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。
我们在ts文件添加一个sku属性，修改后如下

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

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

  myForm: FormGroup
  sku: string

  constructor(formBuilder: FormBuilder) {
    this.sku = ''
    this.myForm = formBuilder.group({})
    let formControl: FormControl = new FormControl("", Validators.compose(
      [Validators.required, this.skuValidator]
    ))
    this.myForm.addControl("sku", formControl)
    formControl.valueChanges.subscribe((value: string) => {
      console.warn('值改变' + value)
    })
    this.myForm.valueChanges.subscribe((form: any) => {
      console.warn('表单改变：' + JSON.stringify(form))
    })
  }

  ngOnInit(): void {
  }

  onSubmit(form: any): void {
    debugger
    this.myForm.controls['sku']
    console.log(form)
  }

  skuValidator(formControl: FormControl): { [s: string]: boolean } {
    if (!formControl.value.match(/^123/)) {
      return { invalidSku: true }
    }
    return { invalidSku: false }
  }

}

html模板中通过[(ngModel)]绑定我们添加的属性

<nz-card style="width:300px;">
    <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)">
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku">
                <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag>
                <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" >
                    <i nz-icon nzType="close-circle"></i>
                    <span>error</span>
                  </nz-tag>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <button type="submit" nz-button class="primary">Submit</button>
        </nz-form-item>
    </form>
    <div>
        sku:{{sku}}
    </div>
</nz-card>