为了验证matInput的内容，可以将其 Package 在mat-form-field中，如下所示：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput [formControl]="numberFormControl">
    <mat-error *ngIf="numberFormControl.hasError('min')">
      The value is lower than the minimum
    </mat-error>
    <mat-error *ngIf="numberFormControl.hasError('max')">
      The value is greater than the maximum
    </mat-error>
  </mat-form-field>
</form>

并对验证器使用表单控件：

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

@Component({
  selector: 'input-errors-example',
  templateUrl: 'input-errors-example.html',
  styleUrls: ['input-errors-example.css'],
})
export class InputErrorsExample {
  numberFormControl = new FormControl('', [
     Validators.min(3),
     Validators.max(6),
  ]);
}

这适用于最小值和最大值，您可以以相同的方式使用minlength和maxlength验证器，文档如下：
https://angular.io/api/forms/Validators

我建议您使用React式表单，因为它将使您的业务逻辑留在ts代码中，使您的模板更容易阅读和维护。

sampleForm = new FormGroup({}) // Instantiating our form

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder.
 this.sampleForm = fb.group({
    // Adding the "age" input to our FormGroup along with its min-max Validators.
    'age': ['', [Validators.min(5), Validators.max(10)]] 
  })
}

还有你的html

<form [formGroup]="sampleForm ">
<label for="age">Age</label>
  <!-- formControlName will bind the age field declared in the ts code. -->
  <input type='number' id="age" formControlName="age">
</form>

你可以使用React式的方法来创建表单。这些在第一次的时候可能看起来很可怕，但是最终在设置不同的验证器时会非常有帮助。
步骤1：导入依赖关系

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
   imports: [
   // other imports ...
   ReactiveFormsModule
   ],
})
export class AppModule { }

步骤2：创建新的FormObject

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

步骤3：创建模板

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

步骤4：添加验证器

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: ['', Validators.required, Validators.min(3)],
    lastName: ['', Validators.required, Validators.min(3)]
  });
}

默认情况下，Angular 模板驱动的表单无法验证最小和最大HTML5验证-这是一个框架问题。您可以编写一个指令来解决这个问题，或者更简单的解决方案是在提交时验证表单。
我所陈述的问题可以在这里看到和测试https://stackblitz.com/edit/angular-input-min-max?file=src/app/app.component.html
有几个指令可用，一个我能够找到，但它也有一些问题。自己试试
https://www.concretepage.com/angular-2/angular-4-min-max-validation#Template-driven
另一种可能的简洁方法是在代码中使用React式表单而不是模板驱动的表单：）

试试看：
minlength和maxlength
但类型不应是数字，例如：

<input matInput placeholder="Test" minlength="3" maxlength="3">

Demo