angular form检测表单数据变化

需求

检测到表单数据变化时做出相应的变化，比如检测某个输入框或选择框数据变化，调用函数计算复杂的信息完整度

例子：

1.html

<form nz-form [formGroup]="validateForm">
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback>
            <input nz-input  placeholder="请输入姓名" formControlName="nickname"/>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>合作意向</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="请选择合作意向">
            <nz-select formControlName="myclass" nzPlaceHolder="合作意向">
                <nz-option nzLabel="合作" nzValue="1"></nz-option>
                <nz-option nzLabel="不合作" nzValue="2"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
</form>

2、js

重点

 // 1.检测表单所有数据变化的回调函数
 this.validateForm.valueChanges.subscribe(data => console.log('form', data));
 
 // 2.检测表单单个数据变化的回调函数  
this.validateForm.get('nickname').valueChanges.subscribe(data => console.log('name-变化', data));

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

@Component({
    selector: 'app-form-change',
    templateUrl: './form-change.component.html',
    styleUrls: ['./form-change.component.less']
})
export class FormChangeComponent implements OnInit {
    validateForm!: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit(): void {
        this.validateForm = this.fb.group({
            nickname: [null, [Validators.required]],
            myclass: [null, [Validators.required]],
        });
        // 1.检测表单所有数据变化的回调函数
        // this.validateForm.valueChanges.subscribe(data => console.log('form', data));
        // 2.检测表单所有数据变化的回调函数
        this.validateForm.get('nickname').valueChanges.subscribe(data => console.log('name-变化', data));
    }
}