Angular Material - Custom Form Field Control [Advanced, 2020, Pt.2]

We continue to build a custom form field control with Angular Material. In this tutorial, I will show you how to make our form control compatible with reactive forms by implementing a control value accessor. After that, we will have a look at error state handling and we also add support for errorStateChecker - the same as the angular team implemented for matInput and some other components. And at the end of the video, we will do some investigation of Angular Material source code and we will reuse some logic from it by using Typescript mixins. Thank you for your attention and enjoy watching :)

📣 Become a Pro in Angular Material Theming (Advanced Workshop) 📣
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
✅ 20%-off coupon code: HASURA-EASY-START

See the previous video about Custom Form Field Control Pt.1:

More about Bridge Pattern:

More about Control Value Accessor in Angular:

Check out my videos about Angular Material Library:

Check out my videos about Angular CDK:

🔗 Links:
Link to GitHub repo:

#webdevelopment #angularmaterial

[DecodedFrontend]

📣 Check out my full Angular Material Theming Workshop 📣
Use 50%-off coupon code: THEMING-WORKSHOP-LAUNCH

[DecodedFrontend]

Thank you all for watching my videos! Please let me know if you like such in-depth videos or maybe you prefer videos without diving into source code etc?
I appreciate any feedback from you and don't forget to share this video in Social Networks if you find it useful 😉

[gund_ua]

Nice work on this one also mixins are awesome!
I noticed you had a bug in your setDisabledState method - you always set your form into disabled state without checking the argument isDisabled.
Otherwise amazing work! Keep it up =)

[aram]

You have published such a lot of freaking awesome videos that I don't really know where to start binge-watching! Thanks for taking your time to prepare and record all those vids, and for sharing your knowledge! I was wondering what your thoughts are about the strongly type forms. I have been experimenting with generics, tried to strictly type arrays and groups, but it opens Pandora box of TS problems. Am I the only one?

[Iam_AndersonP]

very cool video, I was looking something similar, but not for a FormGroup but fgor a single formcontrol, and i can't get it to work with reactive forms and material inputs

[dmitriy]

Wow It is really cool, mixins is very useful I was looking for something like it. Can I use multiple mixins

[socialist_king]

Love your work, keep up the good work and the feedback on the comments.

[chacataplan]

Hello, good tutorial, I tried it but I have version 15 of angular material and "CanUpdateErrorStateCtor" was removed from version 13, what was it replaced with? thank you!!!!

[bonnes]

Amazing work
If possible can you add another video to make that component more reusable so that you can pass country list (Array or Observable) as input decorator. so you pass other kind of list

[alpinestylecom]

Nice Video! What i am missing is the exact benefit of using the mixin instead of the Errorstatematcher? Can you say something about it? Greetings vom Tirol.

[bennyt]

Love your videos! Especially the CDK ones 😊 I’ve never managed to find good videos on rendering components dynamically based on JSON object which can vary in structure per user. Any advice on how to do this?

[ekhlasmridha]

Don't know why, but i am not getting updated form value when submitting the form using a button.