Angular 7:当模型的属性发生变化时如何重新验证控件

在Angular 7中，当模型的属性发生变化时，可以通过使用响应式表单来重新验证控件。响应式表单是Angular提供的一种强大的表单处理方式，它基于RxJS Observables和FormControl类。

要重新验证控件，首先需要创建一个FormControl对象来表示表单控件。FormControl对象可以与模型属性进行绑定，并且可以通过订阅其valueChanges属性来监听模型属性的变化。

以下是一个示例代码，演示了如何重新验证控件：

1. 首先，在组件类中导入必要的模块和类：

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

1. 在组件类中创建一个FormControl对象，并将其与模型属性进行绑定：

@Component({
  selector: 'app-example',
  template: `
    <input type="text" [formControl]="nameControl">
    <button (click)="changeName()">Change Name</button>
  `
})
export class ExampleComponent {
  nameControl = new FormControl('', Validators.required);
  name = '';

  changeName() {
    this.name = 'New Name';
    this.nameControl.setValue(this.name);
  }
}

在上面的示例中，nameControl是一个FormControl对象，它与一个文本输入框进行绑定。name属性表示模型的属性。changeName方法用于改变模型的属性值，并通过setValue方法将新的属性值设置给nameControl。

1. 在模板中使用FormControl对象来验证控件：

<input type="text" [formControl]="nameControl">

在上面的示例中，我们将nameControl绑定到文本输入框的formControl属性上。这样，当文本输入框的值发生变化时，nameControl会自动进行验证。

通过以上步骤，当模型的属性发生变化时，Angular会自动重新验证控件。如果控件的值不符合验证规则，可以通过FormControl对象的valid属性来判断控件的验证状态。

对于Angular 7中的表单验证，推荐使用腾讯云的云开发服务。云开发提供了一套完整的云端一体化解决方案，包括云函数、数据库、存储、云托管等服务，可以帮助开发者快速构建和部署应用。您可以通过以下链接了解更多关于腾讯云云开发的信息：

• 腾讯云云开发
• 腾讯云云函数
• 腾讯云数据库
• 腾讯云存储
• 腾讯云云托管