12. Custom Angular Form Control

[@yusufs_solos]

Amazing video you are angular hero

[@aleksandr95]

Thx for tutorial. It helped me a lot.

[@CodeShotsWithProfanis]

Glad to hear that!

[@DenisBendrikov]

I really like the way you show the problem before explaining way to solve it 🔥🔥

[@CodeShotsWithProfanis]

Glad to hear that! Thanks for your feedback!

[@koolvoid]

Thanks for the tutorial :)

[@CodeShotsWithProfanis]

You are very welcome! :)

[@roberturbanski2797]

Great video. Would be PERFECT if you consider to add tests for such control.

[@CodeShotsWithProfanis]

Great suggestion!

[@pedrotavares41]

Great Video!

[@madeOfClay99]

Thank you very much for this video! One question, what about validators? does the parent component handles that? or it should send it to the custom component? Does the custom component needs to be a FormControl? For example, Invalid value -> Who would handle this?

[@CodeShotsWithProfanis]

You can define the validators in the parent component like you normally do with all the other form elements. If you want to check the validity of the custom component you have to pick the corresponding FormControl instance (from the parent component) and check its validity. As of your question if the custom component should be a FormControl, well no. You can in the Custom Component a form element In the way you prefer. Even a JQuery one. You should of course make sure to update the relevant methods of the ControlValueAccessor. I hope this answers your question :)

[@SqoorQurish]

Hi, any chance to have a list of extension you had on this vedio as seems its helpfull in speedup coding

[@kartheeknandini3767]

Excellent. I am exactly looking this.

[@CodeShotsWithProfanis]

Glad it helps 😊

[@arpittripathi8089]

Simple and elaborated explanation, thanks Profanis! I am consufed with providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: CustomInputComponent, multi: true, }, ], We use provider [ ] to declare the Dependency, why we have "CustomInputComponent", please explain.

[@CodeShotsWithProfanis]

Angular uses tokens for the DI mechanism. To recognize that a component (built-in or a custom one) is compatible with the Angular Forms, it has to provide the token NG_VALUE_ACCESSOR. If we do not do this, then the component will behave like any other component. Let's think of the following; we create a form component and we do not provide the NG_VALUE_ACCESSOR token. We will then have to implement all the needed functionality for the ReactiveForms and the TemplateDriven forms. Having this token though, angular knows how to deal with it. I hope this answers your question.

[@arpittripathi8089]

@@CodeShotsWithProfanis Thanks a lot Profanis! With the above explanation I am able to understand that any CustomFormComponent can be made compatible with Angular Forms by providing NG_VALUE_ACCESSOR token to it. So that CustomFormComponent deals similarly with Angular Foms just like HTML elements ( ... etc) behaves.

[@CodeShotsWithProfanis]

@@arpittripathi8089 As soon as you have the token for the CustomFormComponent, Angular will recognize it as a Form Component and will try to apply the binding. To make this happen, we have to implement the ControlValueAccessor interface and its methods. I hope this helps :)

[@glorieus27]

Red border in form-field not working if using custom form control & custom error messages, how to solve that? Thanks

[@CodeShotsWithProfanis]

Do you mind providing a simple stackblitz with this error?

[@glorieus27]

@@CodeShotsWithProfanis already fix few days ago. Thanks

[@balajibalamurugan8053]

how to add validations error message in our custom form

[@CodeShotsWithProfanis]

You can define the validators in the parent component like you normally do with all the other form elements, and then, If you want to check the validity of the custom component you have to pick the corresponding FormControl instance (from the parent component) and check its validity.

[@aleksandr95]

@@CodeShotsWithProfanis In this case, if the input contains an invalid value, the ng-invalid class is not applied to it.