How to validate input fields one by one in Angular 6

问题

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 .

回答1:

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.

来源：https://stackoverflow.com/questions/52417652/how-to-validate-input-fields-one-by-one-in-angular-6