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

[@DecodedFrontend]

🔥Learn how to build really complex form controls like select dropdown with multi-selection WITHOUT Angular Material in my new advanced course about Angular Forms bit.ly/advanced-angular-forms 🔥🔥🔥

[@swapnasaritnayak2569]

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

[@DecodedFrontend]

Thank you! :) hopefully soon the subscriber counter will be appropriate!

[@mashab9129]

100%

[@jakobbauer7886]

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]

I am happy to hear it, thank you very much! :)

[@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]

​@@blackcat3422 Hi, Thank you for your feedback! Do you want me to commit to GitHub also that state with "empty" components which I created at the very beginning of the video? Do I understand right?

[@DecodedFrontend]

Хаха) та да, куда там с индусами тягаться)) Да, всё верно, я тоже из Украины😁 И спасибо ещё раз за отзыв и идею коммитить начальный стейт👍🏻

[@DecodedFrontend]

Конечно) не вопрос. Желаю успехов!

[@davidgriffin7632]

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.

[@dandavey293]

This is because the text values do not convert to the FormFieldValue interface as it is an object so to fix this: in your custom...container.html set the [value]="value.scope". (scope is the property in the interface which holds the country code), then in search...container.html set the [value]="{scope:'at', query: ''}" (note the query is blank value between 2 single quotes

[@davidgriffin7632]

@@dandavey293 I'll give that a shot. thanks!

[@dandavey293]

@@davidgriffin7632 any issues let me know and I'll help you

[@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.

[@DecodedFrontend]

Hi :) Oh... good question. Well, I would say that "form control" is an element that allows users to change model data via interaction (input, select, etc.). The "form field" is a reusable component that surrounds the "form control" and defines some common visual elements that are used by different types of controls (labels, icons, etc.). For both, the "custom" prefix just highlights that elements are different from the native ones and were created for some exact use case. Saying "custom form field control" is probably not the best wording, so I apologize if I said it somewhere in the video I made you confused :)

[@webmandman]

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

[@DecodedFrontend]

I hope so :D Thank you!

[@Ghanshyam1987]

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

[@DecodedFrontend]

Hey! Thanks for you question. Well, there is no the only 1 right solution. Usually I use separate file for it which I call typings.ts and store interfaces there or create a file some-entity.model.ts which lives in some corresponding module folder and being exported via index.ts. It is usually matter of taste 😊 but definitely I would not store it in component, service, pipe etc files

[@Ghanshyam1987]

@@DecodedFrontend Thanks but is there any way to avoid duplicates of model and interface through out the application

[@DecodedFrontend]

but you will not duplicate them. You can import models from one module to another without duplication. Also you can create shared folder in your app and share you entity classes and interfaces from there. If you need to share models across a multiple applications then you could create a library where you store models & interfaces. I do the same approach in one of project I am working on. I have a server written with TypeScript and NG App. And all my entity interfaces are living in this library, so I can reuse them in Backend App and also in Angular application.

[@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 :|

[@DecodedFrontend]

📣 Check out my full Angular Material Theming Workshop 📣 bit.ly/angular-material-theming-workshop

[@ekhlasmridha6659]

It was really interesting and easy to understand, thanks

[@DecodedFrontend]

Thank you very much for feedback!😊

[@farfazzi]

terrific content. is there a github repo for this?

[@DecodedFrontend]

Thanks! Yes, there is a link. Check a video description Upd: or just follow github.com/DMezhenskyi/angular-cdk-lessons

[@conatcha]

Thanx a lot man. You helped me a lot.

[@DecodedFrontend]

Glad to hear that! You're welcome 😊

[@RajeshYadav-ee2jf]

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

[@DecodedFrontend]

Hi Rajesh! At the moment I don’t have any full angular course but I can recommend you a course I used in the beginning of my angular career and it is still relevant. Here is a link bit.ly/angular-for-beginners

[@RajeshYadav-ee2jf]

Thank you sir surely will help this in my goal achivement

[@RajeshYadav-ee2jf]

I'm waiting for your Full course sir

[@IngvarLosev]

Great lesson! Thank you.

[@michaelfischelmayer176]

Great content!

[@DecodedFrontend]

Thank you for your feedback! :)

[@jamesevans6438]

Awesome video, thanks for teaching and sharing

[@CamiloBenavidesE]

Great! Thanks for your tutorial

[@DecodedFrontend]

Thank you for feedback! I appreciate it :)

[@bonnes04]

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

[@greg6618]

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! ☺️

[@DecodedFrontend]

Glad it was helpful! Have fun with forms 😀

[@intergral81]

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

[@DecodedFrontend]

You're very welcome!

[@matheuspicerne3899]

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.

[@alvaropuertas5873]

thanks! very useful video!

[@redrox1307]

thanks. helped a lot :)

[@DecodedFrontend]

Glad it was helpful!

[@syimykamatov8955]

Thanks

[@DecodedFrontend]

Welcome ;)

[@VendettaUkraina]

Nice

[@DecodedFrontend]

Thank you!

[@zhdanvadim9536]

Круто, спасибо!

[@DecodedFrontend]

Рад, что понравилось)

[@syimykamatov8955]

👍

[@DecodedFrontend]

🙏