Vaildation in Custom components in angular reactive form not working

0
votes

I'm trying to create a new component in angular reactive forms. Here is my sample project: https://stackblitz.com/edit/angular-pyi9jn

I have created a very simple angular form of this architecture:

form - simple counter

The output of form is like : { "simplecounter": 2 }

What I want is that I should be able to pass the max and min values for the counter in the reactive form html. And the form should return form.valid according to these min and max values.

It's giving the output values as expected but the validation is not working. After a lot of experimenting, still I'm not able to find any problem with the code.

Would greatly appreciated any help. Thanks in advance!

1
angularvalidationangular-reactive-forms
What type of validation do you expect for control? – Prashant Pimpale
Basically I want a custom validation. I should be able to send the min and max values of the counter in the reactive form html. – penduDev

1 Answers

2
votes

In order to define custom validator as a directive you have to register it properly:

{
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => SimpleCounterComponent),
    ^^^^^^^^^^^
    instead of useValue
    ...
}

Forked Stackblitz