Adding validation to the mat form field

Question

I am using following code to set error in mat form field:

<mat-form-field appearance="fill">
  <mat-label> {{ Email }}</mat-label>
  <input formControlName="email">
  <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
  <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}</mat-error>
</mat-form-field>

now I want to add another error when the form loads. I have a flag in ngOnInit() when it is true I want to show the error. Adding third mat-error , the error is not visible. I went through stackoverflow and tried following:

ngOnInit() {
formData.form.controls['email'].setErrors({'flag': true});
}

and adding following code in html

  <mat-form-field appearance="fill">
      <mat-label> {{ Email }}</mat-label>
      <input formControlName="email">
      <mat-error *ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error>
      <mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMessage' }}
    <mat-error *ngIf="!email.valid">{{email.errors| json}">{{ 'Display.requiredMessage' }}
</mat-error>
    </mat-form-field>

My service code is as follows:

 form: FormGroup = new FormGroup({
email: new FormControl('', [Validators.maxLength(10), Validators.required]),
});

Still not getting anything when the page loads. How can I do that?

Eduard Stefanescu · Accepted Answer · 2020-02-23 18:45:30Z

2

The email form control should be marked as touched in ngOnInit, in order for the Validators to start checking the rules, as:
ngOnInit(): void { formData.form.controls['email'].markAsTouched(); }

You can read more about the FromControl properties here: https://angular.io/api/forms/AbstractControl

answered Feb 23, 2020 at 18:45

Eduard Stefanescu

4412 gold badges9 silver badges20 bronze badges

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

1 Comment

Eduard Stefanescu Over a year ago

It would have been much easier if you provided a stackblitz example with your code, but I've created one from the Angular Material examples: stackblitz.com/edit/angular-ren9gd, that will display an error when the component is initialized if the email is not entered. Please note that the stackblitz example runs Angular 9 and may require little tweaks. I hope it helps.

Buchi · Accepted Answer · 2020-02-23 17:24:23Z

In your form group Validators rule, the Validators.required implies that, the user can input anything as long as it’s not an empty field, it doesn’t fail. Put Validators.email, to ensure to validate in email format
you can study and learn from this
form:

<div class="form-group">
                <mat-form-field>
                    <mat-label>{{ 'AUTH.INPUT.EMAIL' | translate }}</mat-label>
                    <input matInput type="email" placeholder="{{ 'AUTH.INPUT.EMAIL' | translate }}" formControlName="email" autocomplete="off"/>
                    <mat-error *ngIf="isControlHasError('email','required')">
                        <strong>{{ 'AUTH.VALIDATION.REQUIRED_FIELD' | translate }}</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','email')">
                        <strong>{{ 'AUTH.VALIDATION.INVALID_FIELD' | translate }}</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','minlength')">
                        <strong>{{ 'AUTH.VALIDATION.MIN_LENGTH_FIELD' | translate }} 3</strong>
                    </mat-error>
                    <mat-error *ngIf="isControlHasError('email','maxlength')">
                        <strong>{{ 'AUTH.VALIDATION.MAX_LENGTH_FIELD' | translate }} 320</strong>
                    </mat-error>
                </mat-form-field>
            </div>

form validator in ts file:

email: ['', Validators.compose([
                Validators.required,
                Validators.email,
                Validators.minLength(3),
                Validators.maxLength(320)
            ]),
            ],

Ghoul Ahmed · Accepted Answer · 2020-02-23 16:54:59Z

0

try with hasError('flag') like this

<mat-error *ngIf="service.form.get('email').hasError('flag')">{{ 'Display.requiredMessage' }}

answered Feb 23, 2020 at 16:54

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

Comments

RandDev · Accepted Answer · 2022-01-28 10:14:26Z

0

A solution that works for me:

In the ts file

public checkoutForm = this._FormBuilder.group({
   control: ['', Validators.required],
});
get f() { return this.checkoutForm.controls; }

In the HTML file

<mat-label>mon label <span *ngIf="f.control.errors && f.control.errors.required" class="color-red">*</span></mat-label>

I just tested this solution by chance because I show errors the same way. This code will display the asterisk as long as the field is not filled.

answered Jan 28, 2022 at 10:14

RandDev

11 bronze badge

Collectives™ on Stack Overflow

Adding validation to the mat form field

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related