Angular material input validation not working as expected

Question

I have an input field which gets validated on (keypress). However this is not happening. The only time it works is if I go to another input field or click away and return. This is my code for it.

  <mat-form-field>
    <input matInput placeholder="Network Address" name="network" [(ngModel)]="model.network" required (keypress)="validate($event)">
    <mat-hint>CIDR format, e.g. 192.168.65.0/25</mat-hint>
    <mat-error *ngFor="let error of errors_by_field['network']">{{error.message}}</mat-error>
  </mat-form-field>

  validate() {
    this.http.post<GetItemResult>('/api/branches', this.model).subscribe(data => {
        this.result = data;
        console.log(this.result);
        this.branch = data.item;
        this.errors_by_field = errors_by_field(data.errors);
        for (const [field, errors] of Object.entries(this.errors_by_field)) {
          if (field !== 'global') {
            this.form.form.controls[field].setErrors({server_error: true});
          }
        }
      },
      err => {
        this.submitting = false;
      });
  }

When I console log the ts code result, it prints out the result on every key press, its just not showing the on the first time the input is touched. I have to click elsewhere and return for it to work

show your .ts code as well

Aniket Avhad
– Aniket Avhad

2018-09-03 14:10:29 +00:00
Commented Sep 3, 2018 at 14:10 — Aniket Avhad
– Aniket Avhad, Commented Sep 3, 2018 at 14:10
please see edit in question

RRB
– RRB

2018-09-03 14:11:33 +00:00
Commented Sep 3, 2018 at 14:11 — RRB
– RRB, Commented Sep 3, 2018 at 14:11

RoadEx · Accepted Answer · 2018-09-03 14:14:27Z

1

Try with (input)="validate($event)"instead of (keypress). I think keypress is executed only when the focus switch on another element.

If it's not a reactive form, you can also use (ngModelChange).

edited Sep 3, 2018 at 14:14

answered Sep 3, 2018 at 14:11

RoadEx

5412 silver badges13 bronze badges

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

2 Comments

RRB Over a year ago

tried it, still does the same thing, tried (keyup/down), (ngModalChange), (input), starting to think the problem lies elsewhere with Angular material

RRB Over a year ago

when I console log the ts code result, it prints out the result on every key press, its just not showing the <mat-error> on the first input focus

RRB · Accepted Answer · 2018-09-03 14:32:03Z

0

Ok, so I done something like this and it worked :( <div *ngFor="let error of errors_by_field['network']"><mat-error *ngIf="error">{{error.message}}</mat-error></div>

I know material uses ErrorStateMatcher but that wont work with server side validation in my case

answered Sep 3, 2018 at 14:32

RRB

2,1269 gold badges48 silver badges84 bronze badges

Collectives™ on Stack Overflow

Angular material input validation not working as expected

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related