以 Angular 反应形式订阅输入错误

Question

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

form.html

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

输入-group.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'
     }
  }
}

Answer 1

您可以通过任何形式订阅 statusChanges control/group/array:

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

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

或者，您可以不同地定义状态变量：

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

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

以 Angular 反应形式订阅输入错误

Subscribe to input errors in Angular reactive form

angular

angular-forms

angular-reactive-forms