Angular 表单不会验证您是否在单击之前不离开该字段

Question

I have an angular form that has validations on it. The form works great if you click outside the boxes before trying to submit the form. Otherwise, if you hit enter, or click the submit button prior to having left all the boxes, it does nothing the first time because it doesn't see the form as valid yet. On the next attempt, it submits though.

I'm not sure what would cure the problem. The register method checks to see if the form is valid, but at the time the button is clicked the validation hasn't completed yet, since the onblur event has not completed on the last box data was entered in on. Since the onblur event completes as a matter of clicking the button, maybe there is a way to either fake the onblur, or at least wait for it prior to the form submission?

Anyway, I'm not sure if there is a need for the code with this problem, but I will add what I think to be the most pertinent of the code.

Form html:

    <mat-card>
      <mat-card-title>Register</mat-card-title>
      <mat-card-content>
        <form [formGroup]="form" (ngSubmit)="register(form.value)">
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="Username" formControlName="username">
              <mat-error *ngIf="checkError('username', 'required')">Username is required</mat-error>
              <mat-error *ngIf="checkError('username', 'existingUser')">Username is already taken</mat-error>
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="password" matInput placeholder="Password" formControlName="password">
              <mat-error *ngIf="checkError('password', 'required')">Password is required</mat-error>
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="password" matInput placeholder="Retype Password" formControlName="re_password">
              <mat-error *ngIf="checkError('re_password', 'required')">Retype Password Required</mat-error>
              <mat-error *ngIf="checkError('re_password', 'confirmedValidator')">Passwords must match</mat-error>
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="First Name" formControlName="first_name">
              <mat-error *ngIf="checkError('first_name', 'required')">First name is required</mat-error>
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="Last Name" formControlName="last_name">
              <mat-error *ngIf="checkError('last_name', 'required')">Last name is required</mat-error>
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="Email" formControlName="email">
              <mat-error *ngIf="checkError('email', 'required')">Email is required</mat-error>
              <mat-error *ngIf="checkError('email', 'email')">Invalid email</mat-error>
              <mat-error *ngIf="checkError('email', 'existingEmail')">User with that email already exists</mat-error>
            </mat-form-field>
          </p>
          <p *ngIf="errors" class="error">
            {{errors}}
          </p>
          <div class="button">
            <button type="submit" mat-button>Register</button>
          </div>
    
        </form>
      </mat-card-content>
    </mat-card>

Formgroup:

    this.form = this.fb.group({
      username: new FormControl('', {
        validators: [Validators.required],
        asyncValidators: [this.userValidator.existingUserValidator()],
        updateOn: 'blur',
      }),
      password: new FormControl('', [
          Validators.required,
          Validators.minLength(8),
        ],
      ),
      re_password: new FormControl('',
        Validators.required,
      ),
      first_name: new FormControl('',
        Validators.required,
      ),
      last_name: new FormControl('',
        Validators.required,
      ),
      email: new FormControl('', {
        validators: [
          Validators.required,
          Validators.email,
        ],
        asyncValidators: [this.emailValidator.existingEmailValidator()],
        updateOn: 'blur',
      }),
    }, {
      validators: MatchValidator('password', 're_password'),
    });

register method:

    register(values): void {
      if (this.form.valid) {
        this.userService.register(values);
      }
    }

EDIT: To help people with similar but unrelated issues realize that their issue may be unrelated, this problem was caused by an asynchronous validation on the form field prior to submission. I assumed it was simply because the last field used had a validator.

Answer 1

You're forcing the form to use updateOn: 'blur' which means “Dont validate the input fields until the Form loses the focus”.

If you are not using server side (async) validations you can use the “default” strategy of validation which is updateOn:'change' so the Validator is run each time the user press a Key.

There is a third strategy which is updateOn: 'submit': Validators of each field are not run until you hit “submit”.

Answer 2

it validates correctly. Material elements just don't show errors untill the element becomes touced(and it becomes touched after the first blur). It is considered a good practice from UX point of view, because you should be less offensive when asking user to fill your form. But if you still don't like that behavior then feel free to rewrite default ErrorStateMatcher

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control, form) {
    return control && control.invalid; // will show error in every case when control is invalid. i.e. field will be red from the very beginning.
  }
}

export class MyComponent {
...
customMatcher = new MyErrorStateMatcher();
}
.....
 <input matInput [errorStateMatcher]="customMatcher">

Answer 3

I just did this.

I wanted to show required errors on button click when user doesn't even touch the form and still presses the button (don't want to disable if invalid form)

this.loginForm.markAllAsTouched();

this sets all elements as touched & in HTML *ngIf as

 <span *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched" >
      {{ loginForm.get('email')?.errors?.required ? 'Username Required ' : 'Invalid Username' }}
 </span>