Within my Angular2 form field, I am trying to ensure that the inputted value does not already exist. The challenge lies in accessing instance members within my custom validator function, codeUnique(). Upon execution, "this" refers to either FormControl or undefined, leaving my validator function devoid of context and instance variables. How can I pass my existing values list into my validator without resorting to placing them in a global scope?
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALIDATORS, FormControl, FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { ReferringAppModel } from './referringapp.model';
//import { CodeValidator } from './code-validator';
@Component({
selector: 'add-client-form',
templateUrl: 'src/home/add-client-form.component.html'
})
export class AddClientFormComponent {
myForm: FormGroup;
code: AbstractControl;
name: AbstractControl;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'code': ['', this.codeUnique],
'name': ['', Validators.required]
});
this.code = this.myForm.controls['code'];
this.name = this.myForm.controls['name'];
}
@Input() referringApps: ReferringAppModel[];
ngOnInit() {
}
onSubmit(form: any): void {
console.log("submitted")
};
codeUnique(c: FormControl) {
try {
// Blows up.
return !this.referringApps.find(appInApps => appInApps.Code == c.value) ? null : {
//return false ? null : { // WORKS
validateEmail: {
valid: false
}
};
} catch (ex) {
console.log(ex);
}
}
}
TypeError: Cannot read property 'referringApps' of undefined
at AddClientFormComponent.codeUnique (http://localhost/HubHacienda/dist/bundle.js:50071:26)
at http://localhost/HubHacienda/dist/bundle.js:43538:54
at Array.map (native)
at _executeValidators (http://localhost/HubHacienda/dist/bundle.js:43538:28)
at FormControl.Validators.compose [as validator] (http://localhost/HubHacienda/dist/bundle.js:43518:38)
at FormControl.AbstractControl._runValidator (http://localhost/HubHacienda/dist/bundle.js:45083:54)
at FormControl.AbstractControl.updateValueAndValidity (http://localhost/HubHacienda/dist/bundle.js:45061:38)
at FormControl.setValue (http://localhost/HubHacienda/dist/bundle.js:45327:19)
at DefaultValueAccessor.onChange (http://localhost/HubHacienda/dist/bundle.js:44287:22)
at DebugAppView._View_AddClientFormComponent0._handle_input_12_0 (AddClientFormComponent.ngfactory.js:493:47)
at DebugAppView.eventHandler (http://localhost/HubHacienda/dist/bundle.js:35576:29)
at COMPONENT_REGEX (http://localhost/HubHacienda/dist/bundle.js:38521:41)
at http://localhost/HubHacienda/dist/bundle.js:38634:116
at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6875:29)
at Object.onInvoke (http://localhost/HubHacienda/dist/bundle.js:32132:42)
at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6874:35)
at Zone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:6782:48)
at NgZoneImpl.runInnerGuarded (http://localhost/HubHacienda/dist/bundle.js:32161:83)
at NgZone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:32393:78)
at HTMLInputElement.outsideHandler (http://localhost/HubHacienda/dist/bundle.js:38634:84)
at ZoneDelegate.invokeTask (http://localhost/HubHacienda/dist/bundle.js:6908:38)
at Zone.runTask (http://localhost/HubHacienda/dist/bundle.js:6808:48)
at HTMLInputElement.ZoneTask.ZoneTask.cancelFn.invoke (http://localhost/HubHacienda/dist/bundle.js:6976:34)