Блог

Я хочу реализовать пользовательскую проверку в 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">
 

В приведенном выше коде, по ??? Я имею в виду значение поля columns, но я не знаю, как отправить значение поля columns в метод isValid(). Я не знаю, как выполнить пользовательскую проверку даже после нескольких часов поиска в Google. Я также хочу показать сообщение об ошибке в component.html если метод isValid() возвращает false, но я не знаю, как это сделать.

определение пользовательского средства проверки уже хорошо объяснено в документах

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

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

Как написано на Angular.io : https://angular.io/guide/form-validation#adding-custom-validators-to-reactive-forms

Вы можете вставить директиву, экспортировать ее и вставить в FormControl.

 this.heroForm = new FormGroup({
  name: new FormControl(this.hero.name, [
    Validators.required,
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ])
});
 

forbiddenNameValidator является:

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

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? { forbiddenName: { value: control.value } } : null;
  };
}
 

Ниже приведена ссылка с примером реализации:
https://stackblitz.com/edit/angular-ivy-m89a31?file=src/app/app.component.ts