minLength and maxLength validators not working in Angular7 Reactive Form

Question

I am trying to use Validators.minLength and Validators.maxLength in Angular7 using a Reactive Form but get the following error:

ERROR Error: Expected validator to return Promise or Observable.

This is the typescript code I have:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from 
  '@angular/forms';

@Component({
    selector: 'app-input-values',
    templateUrl: './input-values.component.html',
    styleUrls: ['./input-values.component.css']
})

export class InputValuesComponent implements OnInit {
   inputValuesForm: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnInit() {
    this.inputValuesForm = this.fb.group({
    interestRate: ['', Validators.required, Validators.minLength(2), 
       Validators.maxLength(5)]

 })
}

And this is my template html:

<form [formGroup]="inputValuesForm" (ngSubmit)="onSubmit()" class="form-horizontal">
  <div class="panel panel-primary">
    <div class="panel-heading">
       <h3 class="panel-title">Input Data</h3>
    </div>

    <div class="panel-body">
      <div class="form-group" [ngClass]="{'has-error': inputValuesForm.get('interestRate').errors &&
     (inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)}">
        <label class="col-sm-4 control-label" for="interestRate">Interest Rate (omit percent sign):</label>
        <div class="col-sm-2">
          <input id="interestRate" formControlName="interestRate" type="text" class="form-control">
          <span class="help-block" *ngIf="inputValuesForm.get('interestRate').errors &&
        (inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)">
           <span *ngIf=" inputValuesForm.get('interestRate').errors.required">
             Interest Rate is required
           </span>
           <span
             *ngIf="inputValuesForm.get('interestRate').errors.minlength || inputValuesForm.get('interestRate').errors.maxlength">
              Interest Rate must be greater than 1 character and less than 6 characters
           </span>
         </span>
    </div>
  </div>

    </div>
  </div>
</form>

Can you see what the problem is?

Pretty sure it should be: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(5)]] as an array — penleychan
– penleychan, Commented Mar 25, 2019 at 20:08
Should be noted that the error code for minLength is minlength lowercase — Jonathan
– Jonathan, Commented Oct 13, 2021 at 4:25

nircraft · Accepted Answer · 2019-03-25 20:08:42Z

17

When you are applying multiple validators, It should be an array:

ngOnInit() {
    this.inputValuesForm = this.fb.group({
    interestRate: ['', [Validators.required, Validators.minLength(2), 
       Validators.maxLength(5)]]

 })
}

answered Mar 25, 2019 at 20:08

nircraft

8,5085 gold badges33 silver badges46 bronze badges

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

2 Comments

Niladri Over a year ago

or you can use interestRate: ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(5)])]

Niladri Over a year ago

@Rich the reason behind the error is , the third optional parameter of the FormControl constructor accepts an async Validator i.e asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null , so it assumes Validators.minLength to be an async validator which is not correct. Hence it throws the error

Collectives™ on Stack Overflow

minLength and maxLength validators not working in Angular7 Reactive Form

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related