Пользовательский валидатор Angular с параметрами запускается только один раз
У меня есть собственный валидатор с параметрами, установленными на FormGroup, и он запускается один раз при инициализации, но не запускается ни при каких изменениях элемента управления. Удаление параметров запускает валидатор при каждом изменении элемента управления, но, очевидно, не работает без параметров. Любые предложения по запуску этого при каждом изменении элемента управления? Я пытался следить за элементами управления и использовать updateValueAndValidity(), но пока безуспешно.
const customValidator = (options: { min: number, max: number }): ValidatorFn => {
console.info(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})]});
В консоли нет ошибок. Проблема в том, что валидатор запускается только один раз при создании экземпляра формы. Я хочу запускать валидатор каждый раз, когда изменяется элемент управления в группе форм.
Кажется, в этой демонстрации все работает нормально: stackblitz.com/edit/angular-form-custom-validation-gcbyvt. Вы делаете что-то другое?
Да, спасибо, я нашел проблему. У меня была некоторая деструктуризация объектов options параметров выше return вместе с моими журналами консоли. Я вижу, что фабрика запускается один раз, но валидатор — это все в функции возврата. Я переместил свою логику внутрь функции возврата, и теперь все работает.
Ответы 1
У вас должна быть ошибка в консоли, потому что вы ничего не возвращаете в своем ValidatorFn:
ERROR in src/app/app.component.ts(13,44): error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.
Шаблон
- Обязательно привяжите
FormGroupк форме - Обязательно связывайте каждый
FormControl
Код
<div style = "text-align:center">
<form [formGroup] = "form">
<input type = "text" formControlName = "controlOne">
<input type = "submit">
</form>
</div>
Модуль
- обязательно импортируйте
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 { }
Контроллер
- импорт
FormControl, FormGroup, AbstractControl, ValidatorFn - вернуться из
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.info(options.min, options.max);
return {};//RETURN ERRORS HERE
}
}
form = new FormGroup({
controlOne: new FormControl(null)
}, { validators: [this.customValidator({min: 5, max: 10})]});
}
Я исключил все это для краткости ... не устраняет проблему, заключающуюся в том, что валидатор запускается только один раз, когда экземпляр формы создается, а не при каждом изменении значения изменения элемента управления. В вашем примере у вас есть console.info, если вы действительно запустили свой решение, вы увидите, что валидатор нажмет только один раз и console.info выведет на консоль только один раз.
Тогда я не уверен, что понимаю ваш вопрос. Этот валидатор запускается всякий раз, когда элементы управления в FormGroup изменять. Разве это не предполагаемая функциональность?
ValidatorFnFactory, конечно, запустится только один раз, если это то, о чем вы говорите.
Я исходил из того, что функция customValidator будет запускаться каждый раз, когда элемент управления в группе формы изменяется либо возвращая ошибку, либо ноль. Разве это не так? Я впервые пишу собственный валидатор, поэтому, возможно, я что-то упустил.
Я нашел проблему, обдумав то, что вы упомянули, и приведенные выше комментарии к моему вопросу. Если бы я обнаружил, что все, кроме функции возврата, запускается только один раз. Я переместил свои журналы и некоторые другие переменные в функцию возврата, и все работает, как и ожидалось.
Это верно. Функция customValidator на самом деле является функцией фабрика. Когда вы вызывали его с помощью customValidator({min: 5, max: 10}), он возвращал ValidatorFn. Все, что находится в возвращаемом ValidatorFn, будет выполняться при каждом изменении FormControl.
Большое спасибо, я отредактировал вопрос, чтобы включить эти примечания для будущих зрителей.
Вы должны признать, что ваш первоначальный комментарий к моему ответу был неверным. Предоставленный мной console.info применяется к изменению каждый. Решение, которое я вам предоставил, было правильным и полным.
какие-нибудь ошибки в вашей консоли?