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

In this advanced tutorial, we will start to build a custom form field control that will be compatible with the Angular Material custom form field component and you will be able to switch the appearance of the material form field without touching CSS styles at all! We will understand how Angular Material uses Bridge Pattern to provide developers a very flexible mechanism for customization of our WEB UI look and fill. In the next videos, we proceed to improve our form field control and we will add support for #Angular reactive forms in order to be able to use it as a regular form control.

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

🕒 Time codes:
00:00:56 - My talking ends here ;)
00:01:13 - How everything looks in theory
00:03:45 - Let's code it!

More about Bridge Pattern:

More about Control Value Accessor in Angular:

✅ Check out my videos about Angular CDK:

🔗 Links:
Link to GitHub repo:

#webdevelopment #angularmaterial #angulartip

[swapnasaritnayak]

Easily the most interesting angular tutorials in youtube. This deserves more subscribers.

[jakobbauer]

I searched for what feels like a decade for this solution. Multiple medium articles & the angular documentation didn't explain it as well as you did. Really great work for a very specific topic. Keep it up!!

[DecodedFrontend]

Custom form field controls are heavily used feature in any web application and now you know how to achieve it without “hacking” things 😄 In the next video we will add support of Angular forms!
P.s Don’t hesitate to leave your feedback and criticism 😉

[DecodedFrontend]

📣 Check out my full Angular Material Theming Workshop 📣

[webmandman]

Keep it up bro. You will reach 1 million soon. Great content.

[greg]

Your videos is super useful. I will try to implement a custom field too, after watching this. It will definitely help me later, on my work project, cause we have a lot of different inputs and forms. TY! ☺️

[tekforge]

Hey Dmytro, what's the best explanation of the difference between "custom form control" and "custom form field control" that you can give? These two concepts are a bit confusing for someone new to them.

[MStoica]

I was hoping to find the solution to a slightly different scenario I’m facing.
I have an app and a ui library.
In the ui library I have a simple MySearchComponent which simply implementa ControlValueAccessor and in it’s template I’m using the whole mat-form-field boiler plate, instead of just a plain input, to have the app completely unaware of Material.
In my app, where I use my-search component, everything works fine, except the validations. I see the correct validation state and control errors in my app where I use my-search. But in the ui library, it seems that MySearch component ia not aware of the fact that the control is invalid, because Material doesn’t do its thing regarding styling, it appears as ng-valid amd doesn’t have the input border with the error color and so forth. Also, I have a mat-error in the ui component which should simply display a string from an inout, and that doesn’t work either, because in the ui component the control is seen as valid, and it appears that Material doesn’t display the mat-error if the input is valid. Not sure how to make it work, while respecting the requirement, which is to completely abstract Material from the app where I use the ui library. So I can’t have mat-form-field or anything from Material in the app 🤔
Edit: I've watch part 2 as well, but somehow it's still different enough from my use case that I can't make it work such that the mat-form-field is aware of the validation and control errors :|

[ekhlasmridha]

It was really interesting and easy to understand, thanks

[jamesevans]

Awesome video, thanks for teaching and sharing

[Ghanshyam]

Great learning, Thank you very much. Could you please let me know best way to manage interface and models in Angular

[intergral]

Wow this is amazing and super useful. thank you for what you are doing

[davidgriffin]

doing this in Angular 13 and running into problems. When you're setting the value in the container's template, I get the error "Type 'string' is not assignable to 'FormFieldValue'". Not sure what to do, everything else is exactly as you have it.

[matheuspicerne]

Really nice video, helped me a lot! thx

[ganeshkumarchandrasekaran]

Been following you and you make excellent videos, can you please make video series on the internal working/ code of angular material, also fyi I have subscribed to your theming workshop.Thanks for your efforts.

[bonnes]

thank you for this great content... next time can you do angular material date picker with time picker

[RajeshYadav-eejf]

Hi sir could you please provide full angular tutorial. That would be great help for me in my challenging career.

[farfazzi]

terrific content. is there a github repo for this?