CODEWITHSUNDEEP
angular2-forms
Rob
Rob

Reputation: 115

How would I get all errors from a form group in angular 2?

If I build a form group like this: 

    this.passWordForm = this._formBuilder.group({
        "previous_password": [this.changePassword.previous_password, Validators.compose([Validators.required])],
        "new_password": [this.changePassword.new_password, Validators.compose([Validators.required,PasswordValidator.validate])],
    });

How would I get all errors from the form group? What I've been doing is this: 

<form role="form" [formGroup]="passWordForm" novalidate (ngSubmit)="submitChangePassword()">
<input [(ngModel)]="changePassword.previous_password" formControlName="previous_password" name="previous_password" type="password" placeholder="Previous Password" class="form-control" required>
<input formControlName="new_password" [(ngModel)]="changePassword.new_password" name="new_password" type="password" placeholder="New Password" class="form-control" required>
<div *ngIf="passWordForm.invalid === true && passWordForm.controls['new_password'].errors">
    <div *ngFor="let line of passWordForm.controls['new_password'].errors.message" class="alert alert-danger">{{line}}</div>
</div>
<div *ngIf="passWordForm.invalid === true && passWordForm.controls['previous_password'].errors">
    <div class="alert alert-danger">{{passWordForm.controls['previous_password'].errors.message}}</div>
</div>
</form>

I was hoping that passWordForm.errors would return a concatenated list but it's always null, even when passWordForm.invalid === true

Upvotes: 1

Views: 3071

Answers (1)

praveen
praveen

Reputation: 485

The only way that I think is to know if the form is valid or not by doing passwordForm.valid and then iterate over the Controls object and find the errors of individual form element.

Upvotes: 1

Related Questions