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

在 Angular 7 中，可以使用 Angular 表单验证来验证自定义输入文本框。下面是验证自定义输入文本框的步骤：

首先，创建一个自定义输入文本框的组件。组件代码可以类似以下示例：

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;
}

在上述示例中，组件接受两个输入属性 isRequired 和 minLength，并使用 Angular 的双向数据绑定来绑定输入文本框的值。

在使用自定义输入文本框的组件的父组件中，使用 Angular 表单来验证自定义输入文本框。首先，在父组件的模块文件中引入 ReactiveFormsModule 模块，并将其添加到 imports 数组中。

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

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

在父组件的模板文件中，使用自定义输入文本框组件，并将其包裹在 FormGroup 和 FormControl 中。通过在 FormGroup 中定义相应的验证规则，可以实现对自定义输入文本框的验证。

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

在上述示例中，myForm 是一个 FormGroup 对象，customInput 是一个 FormControl 对象，通过 formControlName 属性与自定义输入文本框进行绑定。通过设置 isRequired 属性为 true 和 minLength 属性为 5，实现了必填字段和最小长度为 5 的验证。

最后，在父组件的 TypeScript 文件中，初始化表单并进行验证。

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: ['']
    });
  }
}

在上述示例中，使用 FormBuilder 创建了一个 FormGroup 对象，并在其中定义了 customInput 的初始值为空字符串。这样，当提交表单时，Angular 表单验证会自动触发，并根据验证规则显示相应的错误信息。

总结起来，以上就是在 Angular 7 中验证自定义输入文本框的步骤。需要注意的是，自定义输入文本框组件和父组件中的验证规则可以根据实际需求进行调整和扩展。如果需要更多关于 Angular 表单验证的详细信息，可以参考腾讯云提供的 Angular 表单验证文档。