How to validate input fields one by one in Angular 6

Question

I am new to angular here I am trying to validate a small form .In this case everything is working fine .

What I want to do is if a user click on SAVE button without touching the form fields I want to display the error message in the first field only instead of all the fields.

Now it's showing error message in all the fields which spoils the look and feel.

So how to show the error message on first filed if the user clicked on SAVE button without enter anything in form.It should work if the user enter something on second field and click on save button it first show error message on first field ,if again user click on save button it should show error message on third field because second is validate before.

app.component.ts

export class InputErrorStateMatcherExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]],
      lastName: ['', [Validators.required, Validators.minLength(4),Validators.maxLength(20)]],
       location: ['', [Validators.required, Validators.minLength(4),Validators.maxLength(20)]]
    });

  }
}

app.component.html

<form class="example-form" [formGroup]="userAddressValidations">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="First Name" formControlName="firstName">
        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
            First Name is Required!
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
            First Name should be atleast 4 characters long!
        </mat-error>

        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
            First Name can be atmax n characters long!
        </mat-error>

        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
            First Name must follow this pattern!
        </mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <mat-label>Last Name</mat-label>
        <input matInput formControlName="lastName">
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('required')">
            Please fill out this field.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('minlength')">
            Minimum 4 characters required.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('maxlength')">
            Accepts only 20 characters.
        </mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <mat-label>Location</mat-label>
        <input matInput formControlName="lastName">
        <mat-error *ngIf="userAddressValidations.get('location').hasError('required')">
            Please fill out this field.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('location').hasError('minlength')">
            Minimum 4 characters required.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('location').hasError('maxlength')">
            Accepts only 20 characters.
        </mat-error>
    </mat-form-field>

    <button mat-raised-button  color="warn">
      <span>Save</span>
  </button>
</form>

Stackblitz:https://stackblitz.com/edit/angular-mat-form-validation-eg-avw2qh?file=app%2Finput-error-state-matcher-example.html

Can anyone help me to do this in effective way .

Thanks .

"Now it's showing error message in all the fields which spoils the look and feel." -- I would certainly lose my mind with a form which forces me to click "submit" every time to reveal a new validation message. It's like spilling beans on the floor and being forced to kneel, pick ONE, stand up, go to garbage bin, and then do it again for the 200 others. — Lazar Ljubenović
– Lazar Ljubenović, Commented Sep 20, 2018 at 4:42

danday74 · Accepted Answer · 2018-09-20 05:17:37Z

I agree with @Lazar Ljubenović that this is a bad idea. However, if it is what you really want ...

I would add a submit method like so:

<form class="example-form" [formGroup]="userAddressValidations" (ngSubmit)="onSubmit()">

and in the submit method do something like this:

onSubmit() {
  const props = Object.keys(this.userAddressValidations.value)
  this.firstError = null
  props.forEach((prop) => {
    if (!this.firstError && this.userAddressValidations.get(prop).errors) {
      console.log('setting firstError', prop, this.userAddressValidations.get(prop).errors)
      this.firstError = prop
    }
  })
  console.log('firstError', this.firstError)
}

This will store the name of the first field with an error in a string.

Then change the HTML error messages to something like this:

<mat-error *ngIf="userAddressValidations.get('firstName').hasError('required') && firstError === 'firstName'">
    First Name is Required!
</mat-error>

This prob will need some tweaking to finalise the implementation but you get the rough idea.

Collectives™ on Stack Overflow

How to validate input fields one by one in Angular 6

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related