Currently, I have a custom component that I am happy with and it is being used in a reactive form as shown below.
private init() {
const control4 = new FormControl("yy", Validators.pattern(".{2}"));
const control5 = new FormControl("zz", Validators.pattern(".{3}"));
this.form = new FormGroup({
c4: control4,
c5: control5
});
}
The error handling is done in the main component where I can access and display any errors. However, I want to add some functionality to the custom component so that it reacts when it is considered invalid.
<input id="c4" formControlName="c4">
<app-textbox formControlName="c5"></app-textbox>
One possible approach is to use the NG_VALIDATOR marker within the decorator of the app-textbox component and then reference it accordingly. Yet, this method will alter the existing validator setup in the main component as displayed above. After searching online for solutions, most results were about custom components and validators examples.
Is there a way to access the validator, the raised error, or even the regex used in the reactive form configuration from within the scope of the custom control that is being reacted to?
@Component({ selector: 'app-textbox', ... ,
providers: [
//{ provide: NG_VALIDATOR, useExisting: forwardRef(() => ...), multi: true },
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ...), multi: true }]
})
export class TextboxComponent implements OnInit, ControlValueAccessor {
...
private showMeTheStuff() {
// access the validator, regex or error raised
}
}