🔥🔥🔥You can get more in-depth knowledge about Angular Forms and learn how to build really complex form controls with my brandnew course about Advanced Angular Forms bit.ly/advanced-angular-forms 🔥🔥🔥
Great course, really interesting. Too bad there are no captions and subtitles, not even in english, for the video lessons otherwise I would have bought it right away. 😢
I hope this video will bring some new knowledge for you today. Share this video with your colleagues if you find it useful, subscribe to my channel and of course leave your feedback :) Have a great day!
I am ashamed to say that I never really understood the control value accessor in my +2 years of angular career, you explained it really well, thank you!
Although this video is already 4 years old, it is still very helpful, easy to follow and compatible with the latest angular(18) version. Thank you very much!
🔥🔥🔥Do you want to master *Angular Material Themes* like a PRO? Check out my new Workshop where you will find a lot of advanced tips & tricks which will help you to make your themes maintainable, lean & consistent! Limited 50%-off discount is about to expire very soon: 🔗 bit.ly/angular-material-theming-workshop 🔥🔥🔥
Awesome content! I was bashing my head against a wall yesterday trying to get this to work, guess I didn't understand the API. You made it very clear and I was able to implement what I needed. Thank you so much!
I'm new to angular and never had to use this before cause normally I am a c#. Net dev. But your Video was realy easy to understand. U helped me a lot geetz from dev to dev 👍😉
Very nice video Dmytro, I am a big fan of yours. Keep making such valuable videos. I have one topic for you. Can you explain MAT_INPUT_VALUE_ACCESSOR of material Input? I am confused about its uses and how it is working under the hood and how can we get benefit after providing in providers.
Hello, on your next video could you possibly talk about implementing ControlValueAccessor together with MatFormFieldControl (Angular Material)? I think the most challenging part is to get it to work with the errorState when using validators.
Hi! Great feedback, thank you! Exactly ControlValueAccessor together with MatFormFieldControl will be covered in 3rd part :) Could you please tell me more what is exactly challenging for you in errorState? Actually errorState was not initially included but maybe I will adjust my video script and cover it as well or create separate video if this topic will be too big.
@@DecodedFrontend binding NgControl's error property with the errorState attribute, so that the component would turn red if there was a validation that is not met.
Best explanation of Control Value Accessors on the web, but i still don't know what multi: true does. Angular documentation is as "good" as in Control Value Accessors docs.
Thank you! Glad you like it :) Maybe later on I create something about rxjs. So far I can say that try to avoid promises in Angular apps and prefer Observables and think twice before bringing RxJs somewhere else (React app as example) 😄
Hi! valueChanges is being triggered every time you call onChange function. Error handling I have partly covered in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AZsw2nRxkBk.html
@decoded front end I want small suggestion Best practice for api request response encryption in angular or react. Please share any useful link if you have 🙈. Thank you!
Can you create a video on the following topic or at least suggest a way of implementing it: The scenario: 1 page component which has 2 children: First child is a complex component with a lot of children and deep inside one of them there is a generic reusable component which holds a reactive form. The second child of the page component is another form which again is used on multiple places. However exactly on this page component there should be a sync between the two forms (the form from the second component should check the validity of the other deep nested form before being submittable). I have tried to create a service, which is provided on a root level and to store the reference of the deep nested form there. It seems to work but I believe that there are better ways of achieving this, since each time this component is used on different places the reference of the form within the service is being replaced. BTW you content is amazing! Keep up with the good work!
Awesome video! I'm using control.setValue(value i want) and it's firing writeValue, hence which method is called when I call setErrors or even markAsTouched?
Great video!! Super super helpful as ive been struggling with this for a while! On an unrelated note, what snippet are you using for that console.log? That's super neat and I would love to use it!
Hi! I am happy to hear that my video helped you to figure out this topic 😉 Regarding console.log, I use an extension for VS Code marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log . Enjoy using it, it is really helpful extension
Great Video. Clear explanation. Can we use this control value Accessor with a component which can return multiple values with multiple inputs. Ex : date range with 2 datePickers or address component with several text boxes . Thanks !!! :)
Hi, Thanks! I am not sure that I understand completely your case but the value of your control accessor might be object where you can store as many values as you need :)
OnPush change detection strategy does not work using control value accessor? Because the form value change is not an input change, nor an event triggered in the custom control component
Yes, indeed. If you use onPush then you have to mark the component as “dirty” using markForCheck in the cases you described (e.g in writeValue() method)
tbh in the example for this lock-icon i would just use a checkbox-input-element and restyle it to have this lock-icon. no need for CVA-stuff here. but nice showcase nevertheless :)
The repo you can find here github.com/DMezhenskyi/angular-cdk-lessons You can go to commits and rollback to the commit before the control value accessor example :)
Hi, can you please provide me a source code. I've reading your tutorial and I have getting this error on clicking a clock icon. => ERROR TypeError: this.onChange is not a function
Hi, can you please provide me a source code. I've reading your tutorial and I have getting this error on clicking a clock icon. => ERROR TypeError: this.onChange is not a function at LockInputComponent.setValue (lock-input.component.ts:46) at LockInputComponent_Template_mat_icon_click_2_listener (lock-input.component.html:2) at executeListenerWithErrorHandling (core.js:15272) at wrapListenerIn_markDirtyAndPreventDefault (core.js:15310)
It's so you can make your own CUSTOM form control (a component) that fits in with the parent's formGroup, along with all your regular form controls. You now you can use your custom control just like you would, say, a regular textbox.
Hi, can you please provide me a source code. I've reading your tutorial and I have getting this error on clicking a clock icon. => ERROR TypeError: this.onChange is not a function
Hi, can you please provide me a source code. I've reading your tutorial and I have getting this error on clicking a clock icon. ERROR TypeError: this.onChange is not a function at LockInputComponent.setValue (lock-input.component.ts:46) at LockInputComponent_Template_mat_icon_click_2_listener (lock-input.component.html:2) at executeListenerWithErrorHandling (core.js:15272) at wrapListenerIn_markDirtyAndPreventDefault (core.js:15310)
![Control Value Accessor in Angular [Advanced, 2020]](/img/logo.svg){kind=logo}
