How to handle default Angular form validation Error?

Question

I am using reactive form validation here. I have 3 fields Email, Full Name & Password (All are mandatory). When I just click on any one of the fields and just click off the fields. By default, Angular shows red color border over the fields

I would like to show the red color border when I type in the fields and remove all the text and click outside.

I don't want to show red color border when I just click into the fields and click off the fields.

How to override this default behavior?

Template

<form name="form" (ngSubmit)="onSubmit(signUpForm)" #f="ngForm" 
        #signUpForm="ngForm" [formGroup] = "signup"
        fxShow="true" fxFlex fxLayout="column" fxLayoutAlign="center stretch" fxLayoutGap="4px">

        <div>
            <mat-form-field appearance="outline">
                <mat-label>Email</mat-label>
                <input matInput placeholder="Enter the email" name="email" formControlName="email">
            </mat-form-field>
        </div>
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Full Name</mat-label>
                <input matInput placeholder="Enter your fullname" name="fullname" formControlName="fullname">
            </mat-form-field>
        </div>
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Password</mat-label>
                <input matInput placeholder="Enter the password" name="password" formControlName="password">
            </mat-form-field>
        </div>
        <div>
            <button class="btn btn-info height_40" type="submit" [disabled]="signup.invalid" fxFlex="98">
                Sign Up
            </button>
        </div>
    </form>

Typescript file

export class SignupComponent implements OnInit {

  signup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
      this.signup = formBuilder.group({
        email: ['', Validators.required],
        fullname: ['', Validators.required],
        password: ['', Validators.required]
      })
   }
}

yes. actually, when i do(text) something in the input and remove all the text, then i need to show red color border. if i just click on the input text field and click outside of it and shows red color border not required.! — RenceAbi
– RenceAbi, Commented Nov 16, 2020 at 8:35

Chellappan வ · Accepted Answer · 2020-11-16 08:56:30Z

As mentioned in the documnentation:

By default, these error messages are shown when the control is invalid and either the user has interacted with (touched)

You can override behavior you can use custom errorStateMatcher.create custom MyErrorStateMatcher by extending ErrorStateMatcher interface. then place this error matcher on matInput element something like this:

component.ts

/** Error when control is pristine. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    console.log(control!.touched && control!.dirty); 
    return !control!.pristine;
  } 
} 
matcher = new MyErrorStateMatcher();

component.html

<input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
           placeholder="Ex. [email protected]">

Working Example

Collectives™ on Stack Overflow

How to handle default Angular form validation Error?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related