0

I'm writing an angular2 validator directive. I have the following situation:

There's a number A and there's a number B, i need to validate if the number in the B field is lesser or equal the number in A field, i'm using template driven forms.

The code in directive is

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';

export function validateLesserOrEqual(number: number): ValidatorFn {
  console.log(number);
  return (c: AbstractControl) => {
    return c.value <= number ? null : {
      validateLesserOrEqual: {
        valid: false
      }
    }
  }
}

@Directive({
  selector: '[lesserOrEqual][ngModel]'
})
export class LesserOrEqualValidator implements Validator, OnChanges {
  @Input() lesserOrEqualInput: number;
  private _validator = Validators.nullValidator;

  ngOnChanges(changes: SimpleChanges) {
    const change = changes['lesserOrEqual'];
    if(change) {
      const val: number = change.currentValue;
      this._validator = validateLesserOrEqual(val);
    }
    else {
      this._validator = Validators.nullValidator;
    }
  }

  validate(c: AbstractControl): {[number: number]: any} {
    return this._validator(c);
  }
}

and in my input i have the following [lesserOrEqual]="movement.parcel_number", but when i put the square brackets surrounding the directive i got the following error Unhandled Promise rejection: Template parse errors: Can't bind to 'lesserOrEqual' since it isn't a known property of 'input'. ("dirty}"

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
Wendel Nascimento
  • 191
  • 6
  • 1
    1) Did you add the directive to the `declarations`? 2) Your `@Input` name is bad. It should match the name of the directive `lesserOrEqual` if you want to use it as a binding property – Paul Samsotha Nov 08 '16 at 11:13
  • Try to change name of your input property from `lesserOrEqualInput` to `lesserOrEqual` – yurzui Nov 08 '16 at 11:41
  • @peeskillet Thanks for the `@Input` name, i was trying to solve this for 2 days! The only problem now is that I can't access the value of the B input, the `validateLesserOrEqual` function is only fired when the A input value is changed, i event tried to access the `AbstractControl` value, but I wasn't successful, do you have any idea of what is wrong? – Wendel Nascimento Nov 08 '16 at 11:47
  • I don't know how you would access a different input. – Paul Samsotha Nov 08 '16 at 11:53
  • You're saying validation only occurs when the reference number A is changed? – Amit Nov 08 '16 at 13:56
  • @AmitDahan yes, when the input B(input with the directive) value is changed the `validateLesserOrEqual` function isn't fired, I think this is happening because the value passed to directive it's a bind to ngModel(input A, should have the value greater or equal than B), the directive watch only changes in ngModel value, not on input B change – Wendel Nascimento Nov 08 '16 at 14:41
  • This sounds similar to the password confirmation problem: http://stackoverflow.com/questions/35474991/angular-2-form-validating-for-repeat-password Where you are cross referencing two controls – silentsod Nov 08 '16 at 16:29
  • The password confirmation issue is similar, but almost every solution that works uses Reactive Forms, I'll try to find one using Template Driven forms – Wendel Nascimento Nov 09 '16 at 11:33

0 Answers0