Subscribe to input errors in Angular reactive form

Question

I have Angular reactive form, where every input is a separated component which receive parent form as @Input(). Inside this component I want to subscribe to his errors, and change variable value, if there is some errors. Errors for every control can came not only from value change, so I can't check errors on blur or on value change. What is the correct way to do this?

form.html

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

input-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'
     }
  }
}

bryan60 · Accepted Answer · 2019-07-28 20:10:01Z

12

you can subscribe to statusChanges on any form control/group/array:

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

it emits on all validation status changes of the form...

alternatively, you could define your status variable differently:

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

but this may not be appropriate for your use case.

answered Jul 28, 2019 at 20:10

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Subscribe to input errors in Angular reactive form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related