title: minLength and maxLength validators not working in Angular7 Reactive Form
body: <p>I am trying to use Validators.minLength and Validators.maxLength in Angular7 using a Reactive Form but get the following error:</p>
  
  <blockquote>
    <p>ERROR Error: Expected validator to return Promise or Observable.</p>
  </blockquote>
  
  <p>This is the typescript code I have:</p>
  
  <pre><code>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)]
  
   })
  }
  </code></pre>
  
  <p>And this is my template html:</p>
  
  <pre><code>&lt;form [formGroup]="inputValuesForm" (ngSubmit)="onSubmit()" class="form-horizontal"&gt;
    &lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;
         &lt;h3 class="panel-title"&gt;Input Data&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="panel-body"&gt;
        &lt;div class="form-group" [ngClass]="{'has-error': inputValuesForm.get('interestRate').errors &amp;&amp;
       (inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)}"&gt;
          &lt;label class="col-sm-4 control-label" for="interestRate"&gt;Interest Rate (omit percent sign):&lt;/label&gt;
          &lt;div class="col-sm-2"&gt;
            &lt;input id="interestRate" formControlName="interestRate" type="text" class="form-control"&gt;
            &lt;span class="help-block" *ngIf="inputValuesForm.get('interestRate').errors &amp;&amp;
          (inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)"&gt;
             &lt;span *ngIf=" inputValuesForm.get('interestRate').errors.required"&gt;
               Interest Rate is required
             &lt;/span&gt;
             &lt;span
               *ngIf="inputValuesForm.get('interestRate').errors.minlength || inputValuesForm.get('interestRate').errors.maxlength"&gt;
                Interest Rate must be greater than 1 character and less than 6 characters
             &lt;/span&gt;
           &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Can you see what the problem is?</p>