在表单字段-Angular- ReactiveForms中至少更改了一个值后，才能使用验证更新表单

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myField" />
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myField: [''],
    });
  }
}

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myField" />
    </form>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myField: [''],
    });
  }

  ngOnInit() {
    this.myForm.get('myField').valueChanges.subscribe((value) => {
      // 在这里可以进行表单验证和更新操作
      // 只有在至少更改一个值后才会执行这里的逻辑
    });
  }
}

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myField" />
    </form>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myField: [''],
    });
  }

  ngOnInit() {
    this.myForm.get('myField').valueChanges.subscribe((value) => {
      // 在这里可以进行表单验证和更新操作
      // 只有在至少更改一个值后才会执行这里的逻辑
      this.myForm.get('myField').updateValueAndValidity();
    });
  }
}