I am currently developing an application that includes a FormComponent. Within this component, I am utilizing the reactive forms module from Angular core to create a custom validator. When calling a function from within another function using 'this', I expected it to refer to the FormComponent, but instead, it is showing as 'undefined' (?).
In the code block under onInit, the FormGroup and FormControl are defined, while functions are declared outside of it.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
formInsurance:FormGroup;
private id:FormControl;
constructor(){}
ngOnInit() {
this.id = new FormControl('',[
Validators.required,
Validators.minLength(3),
Validators.maxLength(10),
Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
this.foo
]);
this.formInsurance = new FormGroup({
id:this.id
});
}
foo(control:FormControl){
this.boo();
if(control.value){
return {
objToReturn: {
returned: name
}
};
}
return null;
}
boo(){
console.log('boo');
}
}