订阅 Angular 反应形式的输入错误答案

【问题标题】：Subscribe to input errors in Angular reactive form订阅 Angular 反应形式的输入错误
【发布时间】：2019-07-28 20:04:00
【问题描述】：

我有 Angular 响应式表单，其中每个输入都是一个单独的组件，接收父表单为 @Input()。在这个组件中，我想订阅他的错误，并在出现错误时更改变量值。每个控件的错误不仅来自值更改，因此我无法检查模糊或值更改的错误。这样做的正确方法是什么？

form.html

<form [formGroup]="formName">
   <app-input-group [parentForm]="formName" [name]="controlName"></app-input-group>
</form>

输入组.ts

export class InputGroupComponent {
  @Input parentForm: FormGroup
  @Input name: string

  public status: string

  // Need to call this function when control in form have errors
  public getStatus() {
     if (this.parentForm.get(this.name).errors) {
        this.status = 'suspended'
     } else {
        this.status = 'boosted'
     }
  }
}

【问题讨论】：

标签： angular angular-reactive-forms angular-forms reactive-forms

【解决方案1】：

您可以在任何表单控件/组/数组上订阅 statusChanges：

this.parentForm.get(this.name).statusChanges.subscribe(v => this.getStatus());

它会在表单的所有验证状态更改时发出...

或者，您可以以不同的方式定义您的状态变量：

get status() {
    return (this.parentForm.get(this.name).errors) ? 'suspended' : 'boosted';
}

但这可能不适合您的用例。

【讨论】：