如何在angular 7中验证自定义输入文本框

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-input',
  template: `
    <input type="text" [(ngModel)]="value" [required]="isRequired" [minlength]="minLength">
    <div *ngIf="value.length < minLength" class="error-message">输入文本长度太短！</div>
    <div *ngIf="isRequired && value.length === 0" class="error-message">必填字段！</div>
  `,
  styles: [`
    .error-message {
      color: red;
    }
  `]
})
export class CustomInputComponent {
  @Input() isRequired: boolean;
  @Input() minLength: number;

  value: string;
}

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

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

<form [formGroup]="myForm">
  <app-custom-input formControlName="customInput" [isRequired]="true" [minLength]="5"></app-custom-input>
</form>

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

@Component({
  selector: 'app-parent-component',
  template: `/* ... */`
})
export class ParentComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      customInput: ['']
    });
  }
}