Блог

У меня есть пользовательский валидатор с параметрами, установленными на FormGroup , и он запускается один раз при инициализации, но не запускается ни при одном из изменений элемента управления. Удаление параметров запускает валидатор при каждом изменении элемента управления, но, очевидно, не работает без параметров. Есть предложения по запуску этого при каждом изменении элемента управления? Я пытался наблюдать за элементами управления и использовать updateValueAndValidity() и все еще безуспешно.

 const customValidator = (options: { min: number, max: number }): ValidatorFn => {
  console.log(options);
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    // logic returning null or { 'not-enough': true }
  }
}
    
this.form = new FormGroup({
  controlOne: new FormControl(null),
  controlTwo: new FormControl(null)
}, { validators: [customValidator({min: 5, max: 10})]});
  

Найдено решение

Благодаря комментариям ниже и другим ответам я понял, что моя консоль регистрируется снаружи для функции возврата валидатора, запускаемой только один раз. Перемещение этой и любой другой дополнительной логики внутри возвращаемой функции выполняется, как и ожидалось. В конечном итоге мое решение состояло в том, чтобы просто переместить некоторый код вниз по строке…

 const customValidator = (options: { min: number, max: number }): ValidatorFn => {
  // No code up here will run on each control being validated
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    // code down here will run on every control change
    // logic returning null or { 'not-enough': true }
  }
}
    
this.form = new FormGroup({
  controlOne: new FormControl(null),
  controlTwo: new FormControl(null)
}, { validators: [customValidator({min: 5, max: 10})]});
  

У вас должна быть ошибка в консоли, потому что вы ничего не возвращаете в своем ValidatorFn :

ОШИБКА в src / app / app.component.ts(13,44): ошибка TS2355: функция, объявленный тип которой не является ни ‘void’, ни ‘any’, должна возвращать значение.

Шаблон

1. Обязательно привяжите FormGroup к форме
2. Обязательно свяжите каждый FormControl

Код

 <div style="text-align:center">
  <form [formGroup]="form">
      <input type="text" formControlName="controlOne">
      <input type="submit">
  </form>
</div>
  

Модуль

1. обязательно импортируйте ReactiveFormsModule

Код

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  

Контроллер

1. импорт FormControl, FormGroup, AbstractControl, ValidatorFn
2. возврат из ValidatorFn

Код

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    customValidator = (options: { min: number, max: number }): ValidatorFn => {
        return (control: AbstractControl): { [key: string]: boolean } | null => {
            console.log(options.min, options.max);
            return {};//RETURN ERRORS HERE
        }
    }

    form = new FormGroup({
        controlOne: new FormControl(null)
    }, { validators: [this.customValidator({min: 5, max: 10})]});
}