javascript - Angular 11 输入验证

Question

我想在 Angular 11 中实现自定义验证。

我的 component.ts 如下：

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

@Component({
  selector: 'app-microplate',
  templateUrl: './microplate.component.html',
  styleUrls: ['./microplate.component.css']
})
export class MicroplateComponent {
  columns = new FormControl('', isValid(???));

  isValid(???) {
    return some logic based on the ???;
  }
}

我的component.html如下（没有任何标签。就像这里所示）：

<label for="columns"><b>Columns: </b></label>
<input id="columns" type="text" [formControl]="columns">

在上面的代码中，由 ??? 我的意思是列字段的值，但我不知道如何将列字段的值发送到 isValid() 方法。即使在谷歌搜索数小时后，我也不知道如何进行自定义验证。如果 isValid() 方法返回 false，我还想在 component.html 中显示错误消息，但我不知道该怎么做。

标签： javascriptangular

Answer 1

文档中已经很好地解释了定义自定义验证器

import { AbstractControl, ValidatorFn } from "@angular/forms";

export function isValid(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    // ??? <--> control.value
  };
}