Блог

Главная - Вопросы по программированию - Angular2 как передать параметр в пользовательский валидатор элемента управления формой?

Angular2 как передать параметр в пользовательский валидатор элемента управления формой?

#angular #angular2-forms

#angular #angular2-формы

Вопрос:

Я написал очень простой валидатор элемента управления формой:

 import { Directive } from '@angular/core';
import { AbstractControl, NG_VALIDATORS } from '@angular/forms';

function checkboxRequiredValidator(c: AbstractControl) {
    return c.value ? null : {
        required: true
    };
}



@Directive({
    selector: '[checkbox-required-validator]',
    providers: [
        { provide: NG_VALIDATORS, multi: true, useValue: checkboxRequiredValidator }
    ]
})
export class CheckboxRequiredValidator {

}

Я хотел бы передать ему параметр сообщения, который я могу вернуть. Я пробовал это, но это не сработает:

 function checkboxRequiredValidator(c: AbstractControl, msg) {
    return c.value ? null : {
        message: msg
    };
}


@Directive({
    selector: '[checkbox-required-validator]',
    providers: [
        { provide: NG_VALIDATORS, multi: true, useValue: checkboxRequiredValidator }
    ]
})
export class CheckboxRequiredValidator {
    @Input('checkbox-required-validator') msg:  = 'default message';

}

Любая помощь будет оценена

Ответ №1:

вы можете изменить существующую функцию и добавить инструмент к закрытию, вы также можете добавить его в свой собственный пользовательский класс валидаторов, например (и, например, написать функцию maxVal) :

 export class MyValidators
{
        public static maxVal(maxVal: number) {
        return (c: FormControl) => {
            return c.value > maxVal ?
                { 'maxVal': { 'MaxValue': maxVal, 'actualValue': c.value } } :
                null;           
        }
    }

а затем используйте его в вашем FormControl и отправьте аргумент (например, 100) в функцию проверки:

 let fc:FormControl = new FormControl('name', MyValidators.maxVal(100));

Ответ №2:

Вы можете сделать саму директиву валидатором. Таким образом, вы можете использовать ввод сообщения.

 import { forwardRef } from '@angular/core';
import { Validator } from '@angular/forms';

@Directive({
  selector: '[checkbox-required-validator]',
  providers: [
    { 
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: forwardRef(() => CheckboxRequiredValidator )
    }
  ]
})
export class CheckboxRequiredValidator implements Validator {
  @Input('checkbox-required-validator') msg  = 'default message';

  validate(c: AbstractControl) {
    return c.value ? null : {
      required: this.msg
    };
  }
}

Комментарии:

1. Это также будет работать с данными модели, которые вы хотите передать, если вы их интерполируете ({{ model.property }}).

2. @GlennBullock как бы вы могли передавать данные модели? Когда я это делаю, я всегда получаю ошибки can’t bind.

3. Переименовав входную переменную в имя пользовательского средства проверки, вы можете вызвать средство проверки для элемента формы, используя «[checkbox-required-validator]=»пользовательское сообщение»

4. Вам все равно нужно объявить директиву в модуле, если вы получаете «не удается связать ошибки»

Метки: