Reactive Forms MinLength Validation Is Not Showing Error

Question

I' using ReactiveForms in my Angular App. I want if user put less than 7 numbers so error message should be show there but unfortunately it's not working if there is any mistake or solution so please provide me. Thanks

Service.ts

PhoneNo: ['', [Validators.required, Validators.minLength(7)]],

html

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" />
        <img src="../../../../assets/img/required-img.png" class="required-img"
          *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.required"
          title="This fields is mandatory" data-toggle="tooltip" />
          <label *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.minLength">Minimum 7 characters required</label>

maybe not the cause of the problem but should be cleaned up as well: you are mixing up template- and reactive forms validation. there is a maxLength attribute on the input with a value of "7", you are having a minLength validator with a value of "7" and printing an error message stating that at least 9 characters are required... — Markus S.
– Markus S., Commented Jun 19, 2019 at 10:51
@MarkusS. . yes there is a mistake in text of label but it should not be effected on my code. and also when I removed maxLenth it's not working. — Zain Khan
– Zain Khan, Commented Jun 19, 2019 at 10:55

pete85 · Accepted Answer · 2020-12-16 12:19:52Z

16

This is well misleading from Angular side. Inside the component you set validators in the following way:

[Validators.minLength(2)]

Then, you would expect the following to work:

errors?.minLength

for whatever reason they decided to use the following format for error messages inside templates though:

errors?.minlength

The only thing you have to do is replace L with l

answered Dec 16, 2020 at 12:19

pete85

1611 silver badge2 bronze badges

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

2 Comments

Shah Over a year ago

that's a bummer. Your answer definitely helped me,

aliencity Over a year ago

Just to update you guys they still have not fixed this funny bug until now, I am using Angular 13.2.6. Thanks pete85 your answer saved me.

vijay kumar · Accepted Answer · 2019-06-19 11:38:49Z

6

Minimum 9 characters required

user error key as minlength not minLength

answered Jun 19, 2019 at 11:38

vijay kumar

712 bronze badges

Comments

John · Accepted Answer · 2019-06-19 11:35:52Z

3

You have maxLength as an attribute in your html. You should remove it

Instead of

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" maxlength="7" />

Do this

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *">

Also, <input> and <img> should not have an enclosing tag at the end <img/> should be <img>

Instead of using minLength and maxLength together, you can create a regexp for it instead

PhoneNo: ['', [Validators.required, Validators.pattern(^[\s\S]{7}$)]],

Also remember to use service.formModel.get('PhoneNo').errors?.pattern instead of .errors?.minLength in order to display the label.

EDIT @malbarmawi was kind enough to make a demo here: https://stackblitz.com/edit/angular-forms-pattern-bernj2. He also has another approach to solve the same problem himself.

edited Jun 19, 2019 at 11:35

answered Jun 19, 2019 at 11:04

John

11.6k5 gold badges60 silver badges75 bronze badges

5 Comments

Muhammed Albarmavi Over a year ago

@WebMaster did you check my answer ??

John Over a year ago

Did you add Validators.pattern(^[\s\S]{7}$) instead of maxLength?

Zain Khan Over a year ago

yes but it show me error. "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type."

Muhammed Albarmavi Over a year ago

@John I have test you solution it's working so both of ours answer are correct 👍

John Over a year ago

The error related to arithmetic operations must be something else. Thanks to @malbarmawi for the demo.

Muhammed Albarmavi · Accepted Answer · 2019-06-19 11:17:14Z

2

add maxLength validators , this will restrict the enter characters to 7 characters 👇

PhoneNo: ['', [Validators.required, Validators.maxLength(7) , Validators.minLength(7)]],

demo 🔥🔥

edited Jun 19, 2019 at 11:17

answered Jun 19, 2019 at 11:00

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

3 Comments

Zain Khan Over a year ago

but I want that user cannot enter less than 7 numbers.

Muhammed Albarmavi Over a year ago

you can add both min and max in that case 👍, I have update the answer @WebMaster

Muhammed Albarmavi Over a year ago

@WebMaster I have include a live example

me-and-viy · Accepted Answer · 2021-05-26 09:58:55Z

0

the reason why it's not working - you should write maxlength in lowercase, not camelcase. same goes to minlength

answered May 26, 2021 at 9:58

me-and-viy

1099 bronze badges

Collectives™ on Stack Overflow

Reactive Forms MinLength Validation Is Not Showing Error

5 Answers 5

2 Comments

Comments

5 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

5 Comments

3 Comments

Comments

Related