Angular2 validations and displaying errors in view

Question

I am using Angular2 and Java for standalone back-end in my web project.

I have validation handling in back-end. If I press, for example - save button, http call occurs to back-end (where my data is validated), and returns response as json which contains validation error metadata (or empty).

Now I want to show those errors to my angular2 view (for email and name). How can I do that?

        @Component({
selector: 'my-selector',
templateUrl: `
 <label for="name">Name</label>
 <input  id="name" [(ngModel)]="name" />
  <div>space for error message</div>
  <label for="email">Email</label>
   <input  id="email"  [(ngModel)]="email" />
 <div >space for error message</div>
  <button (click)="onSave()"> Save </button>`  })

      export class EmailForm { 
        private name:string;
        private email:string;
        private errorMessages
    public onSave() {
        return this._deService.add(.....);
    }}
  //and I have validationErrorMessages for that input,recived from back-end,let already deserialized form
     let messages: ErrorMeta[] = [
     { validatorKey:'required', message:'Required',controlId:'name'},
     { validatorKey: 'invalidEmailAddress',message:  'Invalid email address',controlId:'email'}
     ];

See angular.io/docs/ts/latest/guide/forms.html, angular.io/docs/ts/latest/cookbook/form-validation.html. You can use async validators to call to the server. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 14, 2016 at 12:23
Dear Gunter,in my project I dont use forms. I recivie errors (http call already implemented and i recive errors ) as json and must show on view. So,I have @ messages and want to show those messages on screen.And set invaid state.? Maybe it is not possible,and I must use forms. But I have on question about using FormBuilder. This would work fine but what if our form grows with more controls? — emanuel07
– emanuel07, Commented Sep 14, 2016 at 14:26
Sure you can do it but this way the question is just too broad. Your question should show the code that demonstrates what you have tried and where you failed. How does the data look like that you get back from the server. How should we know how you actually want them shown. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 14, 2016 at 14:29
I edited the question,please review it.And one question about using FormBuilder. This would work fine but what if our form grows with more controls? — emanuel07
– emanuel07, Commented Sep 14, 2016 at 16:32

Günter Zöchbauer · Accepted Answer · 2016-09-14 16:53:35Z

1

update

getErrors(controlId) {
  return this.messages.filter(err => err.controlId == controlId);
}

<label for="name">Name</label>
<input  id="name" [(ngModel)]="name" [class.invalid]="getErrors('name').length"/>

<div *ngFor="let err in getErrors('name')">
  {{err.validatorKey}} - {{err.message}}
</div>

<div>space for error message</div>
<label for="email">Email</label>

<div *ngFor="let err in getErrors('email')">
  {{err.validatorKey}} - {{err.message}}
</div>

<input  id="email"  [(ngModel)]="email" />
<div >space for error message</div>

<div *ngFor="let err in getErrors('email')">
  {{err.validatorKey}} - {{err.message}}
</div>

<button (click)="onSave()"> Save </button>

edited Sep 14, 2016 at 16:53

answered Sep 14, 2016 at 16:36

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

10 Comments

emanuel07 Over a year ago

No,each message must be under its control. And I think that,it would be better,set invalid state of something,maybe to Controls?

emanuel07 Over a year ago

Ok,and how set invalid state for controls?

Günter Zöchbauer Over a year ago

I updated my answer (only for the first input, same for the others)

emanuel07 Over a year ago

Nice,can I resolve that in back-end,not touching to control?

Günter Zöchbauer Over a year ago

I don't understand what you mean

|

Collectives™ on Stack Overflow

Angular2 validations and displaying errors in view

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related