Angular 6，this.formGroup.updateValueAndValidity() 无法正常工作

typescript

解决Angular 6中this.formGroup.updateValueAndValidity()无法正常工作的问题

在使用Angular 6进行表单验证时，我们经常会使用formGroup来管理表单的数据和验证规则。然而，有时候我们可能会遇到this.formGroup.updateValueAndValidity()无法正常工作的情况。本文将介绍这个问题的解决方法，并提供一个案例代码来帮助读者更好地理解。

首先，让我们来看一下this.formGroup.updateValueAndValidity()的作用。在Angular中，当我们修改了表单中的数据或者验证规则时，我们需要手动调用这个方法来更新表单的状态。这个方法会重新评估表单中的所有控件，并根据当前的值和验证规则来更新它们的状态。但是，有时候这个方法可能会出现问题，导致表单的状态无法正确更新。

接下来，我们将介绍一个常见的问题，即当我们在动态添加表单控件时，this.formGroup.updateValueAndValidity()无法正常工作的情况。假设我们有一个表单，其中包含一个输入框和一个按钮。当我们点击按钮时，会动态地向表单中添加一个新的输入框。我们希望这个新的输入框也能够参与表单的验证，所以我们在添加完输入框后调用了this.formGroup.updateValueAndValidity()方法。然而，我们发现这个方法并没有生效，新的输入框的状态没有被正确更新。

那么，为什么会出现这个问题呢？原因是当我们动态添加一个新的控件时，Angular并不知道这个控件的存在。它只会在初始化表单时对已存在的控件进行初始化，而对于新添加的控件并不会进行初始化操作。因此，调用this.formGroup.updateValueAndValidity()方法并不能对新添加的控件起作用。

为了解决这个问题，我们需要手动调用this.formGroup.addControl()方法来向表单中添加新的控件，并且在调用后立即调用this.formGroup.updateValueAndValidity()方法来更新表单的状态。这样，新添加的控件就会被正确地初始化并参与表单的验证。

下面是一个简单的案例代码来演示这个问题的解决方法：

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-form',
  template: <code>
    <form [formGroup]="formGroup">
      <input formControlName="input1" placeholder="Input 1">
      <button (click)="addInput()">Add Input</button>
    </form>
  </code>,
})
export class FormComponent {
  formGroup: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      input1: ['', Validators.required],
    });
  }
  addInput() {
    const newControl = this.formBuilder.control('', Validators.required);
    this.formGroup.addControl('input2', newControl);
    this.formGroup.updateValueAndValidity();
  }
}

在上面的代码中，我们通过this.formBuilder来创建了一个formGroup，并在初始化时添加了一个名为input1的输入框。当我们点击按钮时，会调用addInput()方法来添加一个新的输入框。在addInput()方法中，我们首先使用formBuilder创建了一个新的控件newControl，然后调用this.formGroup.addControl()将其添加到表单中。接着，我们立即调用this.formGroup.updateValueAndValidity()来更新表单的状态。

通过这样的操作，新添加的输入框就会被正确地初始化，并参与表单的验证。这样，我们就解决了Angular 6中this.formGroup.updateValueAndValidity()无法正常工作的问题。

在Angular 6中，当我们遇到this.formGroup.updateValueAndValidity()无法正常工作的情况时，我们可以通过手动调用this.formGroup.addControl()方法来解决这个问题。这样，新添加的控件就会被正确地初始化，并参与表单的验证。希望本文能够帮助读者更好地理解和解决这个问题。