angular 2 pass array to custom validator (Template driven form)

Question

I need to pass an array of objects to the a2 custom validator and then I d like to validate the value of the template driven form field against the records in that array.

However I can not retrieve the object inside the validator.

The only thing I can see is its name as string.

Any help is kindly appreciated.

<label class="btn btn-default btn-sm"  
[(ngModel)]="krediHesaplamaModel.radioModelKrediTur" name="krediHesaplamaModel.radioModelKrediTur" 
btnRadio="0"  
(click)="onRadioButtonKrediHesaplamaTurChange()" krediTuruValidator="this.krediList" >

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import {Kredi} from '../kredi';

@Directive({
    selector: '[krediTuruValidator][formControlName],[krediTuruValidator][formControl],[krediTuruValidator][ngModel]',
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => KrediTuruValidator), multi: true },
    ]

})


export class KrediTuruValidator implements Validator {

    constructor(  public krediTuruValidator: Kredi[]) { }

    validate(c: AbstractControl): { [key: string]: any } {
        console.log('KL' + this.krediTuruValidator[0].krediTuru); //UNDEFINED

        let v = c.value;
        return null;
    }

}

@Attribute('krediTuruValidator') is returning a string value, I guess you have to parse it to JSON first before doing this.krediTuruValidator[0].krediTuru — Pankaj Parkar
Thanks for the swift response.JSON.parse(this.krediTuruValidator) throws an error saying that argument of type Kredi[] can not be assigned to string. — desperado06

desperado06 desperado06 · Accepted Answer · 2017-04-13T10:29:23

I resolved this issue by delegating the validation function to another method in the component. That way I can access any object I desire

import { Directive, forwardRef, Attribute, Input } from '@angular/core';
import { Validator, ValidatorFn, AbstractControl, NG_VALIDATORS } from '@angular/forms';


@Directive({
    selector: '[krediVadeSayisiValidator][formControlName],[krediVadeSayisiValidator][formControl],[krediVadeSayisiValidator][ngModel]',
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => KrediVadeSayisiValidator), multi: true },]

})


export class KrediVadeSayisiValidator implements Validator {

    @Input() krediVadeSayisiValidator: ValidatorFn; //same name as the selector

    validate(c: AbstractControl): { [key: string]: any } {

              return this.krediVadeSayisiValidator(c);
    }

}

How do I access it inside the template?

    <input type="number" class="form-control" name="krediVadeSayisi" [(ngModel)]="krediHesaplamaModel.krediVadeSayisi" #krediVadeSayisi="ngModel"
        required maxlength="2" [krediVadeSayisiValidator]="validateKrediVadeSayisi()" />  /*this function is inside the component*/

angular 2 pass array to custom validator (Template driven form)

1 Answers