Angular 8 - form validation is not working properly

Question

<mat-form-field class="input-label-add">
  <input matInput placeholder="Registration **" formControlName="registration">
  <mat-error *ngIf="addLockerForm.get('registration').hasError('maxlength')">registration cannot exceed 8 characters</mat-error>
  <mat-error *ngIf="addLockerForm.get('registration').errors">registration or surname is required</mat-error>
</mat-form-field>

this.addLockerForm =  this.formBuilder.group({
    locker_serial_number: [null, Validators.required],
    customer_surname: [null],
    registration: [null, Validators.maxLength(10)],
    mobile: [null],
    email: [null],
    date_in: [null, Validators.required],
    date_out: [null, Validators.required], 
  },
  { validator: [this.validateCustomerDetails, this.validateCustomerContact] });

addLockerForm.get('registration').hasError('maxlength') stays false all the time

Please add the component .ts code to your question.

kvetis
– kvetis

2020-01-07 11:28:44 +00:00
Commented Jan 7, 2020 at 11:28 — kvetis
– kvetis, Commented Jan 7, 2020 at 11:28

Emilien · Accepted Answer · 2020-01-07 13:22:52Z

4

Could you try this ?

addLockerForm.get('registration').errors.maxlength

https://angular.io/guide/form-validation#validator-functions

EDIT 1

You don't need to use .errors.

Please update your code like this :

<mat-form-field class="input-label-add">
  <input matInput placeholder="Registration **" formControlName="registration">
  <mat-error *ngIf="addLockerForm.get('registration').hasError('maxlength')">registration cannot exceed 8 characters</mat-error>
  <mat-error *ngIf="addLockerForm.get('registration').hasError('required')">registration or surname is required</mat-error>
</mat-form-field>

registration: [null, [Validators.required, Validators.maxLength(8)]],

edited Jan 7, 2020 at 13:22

answered Jan 7, 2020 at 11:32

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

5 Comments

Ivilin Stoyanov Over a year ago

when I start typing something in the input field it's giving me an error "TypeError: Cannot read property 'maxlength' of null at Object.eval"

Eliseo Over a year ago

if you want use errors.maxlength, don't forget the "safe operator" errors?.maxlength

Ivilin Stoyanov Over a year ago

@Emilien Yes, it does now after I modified the custom validation method. Thank you.

Emilien Over a year ago

@IvilinStoyanov If your solution come from StackOverflow, please make an answer as "resolved". Otherwise, you can edit your post adding your solution :)

Ivilin Stoyanov Over a year ago

@Emilien Okay :)

Ivilin Stoyanov · Accepted Answer · 2020-01-07 13:20:30Z

1

The problem was in my custom validation method where I remove any errors for the following form control. I forgot about this method. Thank you all for the help.

validateCustomerDetails(g: FormGroup) {
if ((isNullOrUndefined(g.get('registration').value) || g.get('registration').value == "") &&
  (isNullOrUndefined(g.get('customer_surname').value) || g.get('customer_surname').value == "")) {
  g.controls['registration'].setErrors({ 'empty': true });
  g.controls['customer_surname'].setErrors({ 'empty': true });
}
else {
  g.controls['registration'].setErrors(null);
  g.controls['customer_surname'].setErrors(null);
}

answered Jan 7, 2020 at 13:20

Ivilin Stoyanov

4071 gold badge5 silver badges19 bronze badges

Comments

void · Accepted Answer · 2020-01-07 11:37:43Z

0

  *ngIf="addLockerForm.controls?.registration?.invalid && addLockerForm.controls?.registration?.touched"

this.addLockerForm = formbuilder.group({
     registration: [
       "",
       [
         Validators.required,
         Validators.minLength(4),
         Validators.maxLength(8),
         Validators.pattern(Your Pattern)
       ]
     ]  
  }

If U are Using FormBuilder And Validator Use FormBuilder In Your Ts File

answered Jan 7, 2020 at 11:37

void

9139 silver badges23 bronze badges

Comments

Akhil Naidu · Accepted Answer · 2020-01-07 11:50:36Z

0

try following code

<mat-form-field class="input-label-add">
   <input matInput placeholder="Registration **" formControlName="registration">
   <div *ngIf="registration.errors">
      <mat-error *ngIf="addLockerForm.get('registration').errors.maxlength">
         registration cannot exceed 8 characters</mat-error>
      <mat-error *ngIf="addLockerForm.get('registration').errors.required">registration or surname is required</mat-error>
   </div>
</mat-form-field>

edited Jan 7, 2020 at 11:50

answered Jan 7, 2020 at 11:37

Akhil Naidu

8671 gold badge5 silver badges18 bronze badges

1 Comment

Eliseo Over a year ago

Akhil, if you want use errors.maxlength, don't forget the "safe operator" errors?.maxlength

Collectives™ on Stack Overflow

Angular 8 - form validation is not working properly

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related