I would call this video: Power tips for Angular forms. These are the techniques that mitigates a ton of risk as it uses reusable well tested code. I just picked up Angular 3 weeks ago as my day job is in the corporate world . Not uncommon to have forms with over 30 fields in the banking sector so imagine having all that HTML repeated - maintenance will be a nightmare. Excellent video, deserves more views.

@TheRyanSmee

3 жыл бұрын

Thank you! I really appreciate the positive feedback 😊 I’m glad you found it useful

I just want to thank you so much for this video and sharing your knowledge and skills. The quality of the video itself, the structure, the **easy** way of explaining perhaps **complex** concepts is excellent. Your video is the best video related to angular custom form components I've seen. Congratulations and thanks again.

great great work as always, I haven't seen this discussed anywhere!

@TheRyanSmee

3 жыл бұрын

Hey, thanks for the always supporting my channel. I must admit, I can’t take all the credit for this idea - about 2 years ago a colleague opened my eyes to just how useful they can be and now I use them all over the place haha. Before that, I had only ever used them to make Angular inputs out of non-standard html elements. Thanks again for watching mate! 😊

The most appropriate one, I was looking for. Thank you very much for the nice presentation.

@TheRyanSmee

2 жыл бұрын

Thank you! I’m glad you found it useful 😊

Thank you Ryan, really helped me, cheers from Brazil!

@TheRyanSmee

2 жыл бұрын

Brilliant, I’m really glad to hear! Thank you for watching and commenting 🙌

Appreciated, It helps a lot to get details about the Control value Accessor, Thanks.

@TheRyanSmee

2 жыл бұрын

Yeah it’s a super powerful feature that I think is often overlooked. Cheers for watching and commenting

You, my friend, are an EXCELLENT presenter. I'm going to be watching for you.

@TheRyanSmee

3 жыл бұрын

Cheers mate, I really appreciate that! Hopefully you find the content useful😊

This video is amazing. Just the content I needed. Thanks!

@TheRyanSmee

Жыл бұрын

Thanks, I really glad you found it helpful 😊

I had to even like the video before even finishing it. This is good stuff.

@TheRyanSmee

3 жыл бұрын

Thank you for the kind words! I’m really glad you found it useful 🙂

Buddy, you are amazing, thanks for sharing this wonderful knowledge to us

@TheRyanSmee

2 жыл бұрын

Thank you for watching - I’m really glad you found it useful! 😊

You are a genious mr Ryan ! Thanks a lot ! You helped me much !

@TheRyanSmee

2 жыл бұрын

Thank you so much for watching and commenting. I’m really glad I could help 👍

thank god for good teachers like you. you got a like and subscribe from me. thank you!!

Great video and very useful! Thnks :)

Amazing explanation! Thanks!

@TheRyanSmee

2 жыл бұрын

Thanks mate! Really glad you enjoyed it 😊

Here I am on KZread wonted to watch something funny and stupid after work, and I can’t take my eyes of this one. Very good content

amazing explanation and so so so easy to do it bcoz of his beautiful explanation

@TheRyanSmee

2 жыл бұрын

Thanks for watching and commenting! I’m super glad you found it helpful 😊 your comment is really kind, thanks!

amazing!!!, that was i looking for

@TheRyanSmee

3 жыл бұрын

Awesome, I’m really glad you found it useful 😊 thank you for watching!

Really really helpful. Thanks.

@TheRyanSmee

2 жыл бұрын

Cheers for watching! I’m really glad you found it helpful 😊

Great works!.

@TheRyanSmee

3 жыл бұрын

Thanks for watching and commenting 😊

Thank you very much sir. I like the idea very much.

@TheRyanSmee

2 жыл бұрын

Thank you! I’m really glad you found this video useful 😊

thank you, great tutorial

@TheRyanSmee

2 жыл бұрын

Thank you! I’m really glad you enjoyed it and found it helpful 😊

thank you a lot!

Absolute beauty.. it would be even more good if we can see it for Date and Dropdown .

@TheRyanSmee

3 жыл бұрын

It’s actually almost an identical process. I tend to use a 3rd party library for my date pickers and select boxes as there’s usually a but load of accessibility and cross browser edge cases that are easily missed. Assuming you are using a 3rd party component, you can just drop it into your component with any error handling/labels etc and it should just work 😊

Awsome video

@TheRyanSmee

Жыл бұрын

Thank you! I'm glad you found it useful

Amazing..thanks a lot for this video and for sharing your knowledge, subscribed! What theme you are using?

You are the best!

@TheRyanSmee

5 ай бұрын

Cheers mate haha much appreciated

muchas gracias por el contenido!😁

@TheRyanSmee

Жыл бұрын

De nada! 😊

really cool, thx.

@TheRyanSmee

3 жыл бұрын

Glad you found it useful 😊 thanks for commenting!

I wish these custom form control videos covered template driven forms. I've created a custom form control that's working great with reactive forms, but the template side doesn't seem to be built into ControlValueAccessor as Angular's docs claim.

Hello, first of all thank you very much for this great tutorial, I have a big problem regarding the reset of the form, I have not been able to get this.form.reset to work for me, now what is the form currently doing if it gives the reset... When seeing the form.value the values ​​are cleaned, but the fields in the inputs keep the text despite the fact that the form no longer has values, I really appreciate your help.

Subscribed 👍

@TheRyanSmee

3 жыл бұрын

Cheers! I’m really glad you’re finding the content useful!

i try to bind the value with : [value]="value" and it doesnt work. only the ng model bind is working : [(ngModel)]="value" and it seems bit odd because i want to use reactive forms only, any suggestions why is it not working with [value]="value"?

Thanks, but why it is not working when i use it as in angular element ?

Instead of creating one module for one control, couldn't we put all controls inside a module? Would it create any problem?

Hi Could you please let me know what are the IntelliSense plugins that you use

@TheRyanSmee

3 жыл бұрын

Hi, I use a text editor called WebStorm as my text editor and it comes with all of this stuff out of the box. It is a paid app so not ideal for everyone. I asked on my Twitter about the best Angular plugins for visual studio code and these were suggested: Must have - marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials Also nice to have - marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics Hopefully this helps 🙂

Hi Ryan Thanks for the great technique, I haven't seen this before. However, I have some question 1. In input.component.ts, You have created 3 inputs as parentForm, filedName and label When you pass the value in the registration-form.html like this Why only parentForm has the square brackets, the fieldName and label not have it. 2. I try to follow you step by step in this clip, I have a problem with the password-input, the eye icon disappears and when I type in the password field, it always shows the password not show dot. Thanks.

@TheRyanSmee

3 жыл бұрын

Sorry for the late reply. I must have missed the notification. Do you still need help with this?

@TheRyanSmee

3 жыл бұрын

1. Only the dynamic attributes that take a variable need square brackets. If an attribute has a hard coded string as a value then it doesn't need square brackets . That said, if for whatever reason you wanted to use square brackets, you can add single quotes e.g fieldName="name" is the same as [fieldName]="`name`" 2. With the password input, have you made sure to add [type]="passwordFieldType"? The togglePasswordVisible() method should toggle passwordFieldType’s value between ‘text’ and ‘password’. Have you checked the files on github? It might make it easier to check to see what you have missed 😊 github.com/theryansmee/angular-custom-form-controls/blob/version/completed-form-controls/src/app/shared/form-elements/password-input

@TheRyanSmee

3 жыл бұрын

Hopefully this all helps!

Which VS Code extension do you use for angular field suggestion in template?

@TheRyanSmee

2 жыл бұрын

Hey, thanks for watching and commenting. In the video I’m actually using webstorm so it does this out of the box. I thought this was the same in VSCode but I just checked and it doesn’t seem to be. Sorry about that.

@orlagh10

2 жыл бұрын

hi, I use Angular Snippets v13.0.0 by John Papa extension and if gives the same suggestion. hope it helps

Hi, Thank you very much for posting this advanced stuff. Could you please tell me where is defined?

@TheRyanSmee

3 жыл бұрын

Hi. In this project i'm using the free Angular Fontawesome package: www.npmjs.com/package/@fortawesome/angular-fontawesome Once the packages are installed you just have to add them to the module that you'd like to use them in. Theres a few different ways to do this, but i've done it as follows: github.com/theryansmee/angular-custom-form-controls/blob/master/src/app/app.module.ts I hope this helps 😊Thanks for watching

@pgc1721

3 жыл бұрын

@@TheRyanSmee Thank you so much for replying Mr. Ryan. I really appreciate your work. Wish you a very happy new year. Cheers :-)

@TheRyanSmee

3 жыл бұрын

No worries, I’m always happy to help. Thank you for watching videos and commenting. Happy new year to you too!

Hi, How to use isDisabled in the app-input ? I tried using "@Input() public isDisabled: boolean;" decorator, but its working only for isDisable=true, The field is not getting enabled If I set it to False. Am I missing anything critical in this context? Please suggest. Thank you in advance.

@TheRyanSmee

3 жыл бұрын

Hi. In this tutorial we are using reactive forms so the disabled state should be driven from the form it's self (Disabled state is updated at the form level, and passed to the form control using ValueAccessor, triggering the `setDisabledState` method in the app-input component itself. This will then update the isDisabled variable: github.com/theryansmee/angular-custom-form-controls/blob/version/completed-form-controls/src/app/shared/form-elements/input/input.component.ts ) This means you shouldn't need to pass the disabled state using an @Input. All you should need to do is it call something like `this.myForm?.get( 'myControl' )?.disable()` or `this.myForm?.get( 'myControl' )?.enable()` from the parent form component. The only time you would need to manually pass in a controls disabled state using an @Input, would be if you were using a template driven forms (ngModel). We don't cover this technique in the tutorial because I rarely use this method as ReactiveForms are so powerful. That said, if you are using template driven forms, I think using @Inputs would be your best bet 👍 Hopefully this all makes sense? Thanks for watching and commenting 😊

@nagenderg25

3 жыл бұрын

@@TheRyanSmee Dear Ryan, Thank you so much for replying.

@TheRyanSmee

3 жыл бұрын

Don’t be silly, I’m always happy to help 😊

I always get this error: Cannot invoke an object which is possibly 'undefined'. 5 Help! It seems that the "public changed: ((value: string) => void)" is deprecated because it gets detected as an error so you are forced to put a "| undefined" at the end, but then you get the above mentioned error.

@TheRyanSmee

3 жыл бұрын

Hi 👋 what version of angular is this? I assume this is due to 11/12 strict mode?

@alessandrocinque4542

3 жыл бұрын

@@TheRyanSmee it should be the most recent one because I just started to learn Angular 2 weeks ago

@TheRyanSmee

3 жыл бұрын

Ah yeah, so that’s probably the issue. I haven’t had a chance to play around with angular 12 yet sorry. It shouldn’t be too different I shouldn’t think, but I can’t help much more than that. I’m sorry 😬 I also don’t have my laptop to hand so I can’t see if there’s a quick work around. Are you part of the angular community discord? It’s deffo worth joining that people people are always happy to help on there 😊

Hi is it possible to validate on form submit?

@TheRyanSmee

Жыл бұрын

Hi, do you mean rather than on touched/dirty. I do this sometimes by having a variable in my form component called something like hasBeenSubmitted that starts off as false and is switched to true when the submit button is clicked. Then in your validation logic, check for that as well as touched or dirty or whatever

@sanjivasen

Жыл бұрын

@@TheRyanSmee yes.

@sanjivasen

Жыл бұрын

I have child input component, i dont want to pass submite variable to child input component

amazing video as always... though it would be better if you could zoom a little next time :)

@wolfisraging

3 жыл бұрын

forgot to tell I've subscribed already :)

@TheRyanSmee

3 жыл бұрын

Ah brilliant. Thank you for watching, commenting and subscribing! It really means a lot. I'm glad you're enjoying the content 😊

What theme do you use?

@TheRyanSmee

2 жыл бұрын

Hi, I the text editor is Webstorm. I use this theme plugins.jetbrains.com/plugin/12334 Thanks for watching!

what is the meaning of "formField?.dirty" ..I did not get the syntax "?."

@TheRyanSmee

3 жыл бұрын

Hi. Using `?` before a `.` is called optional chaining. It’s pretty new to javascript & typescript. It’s used as a shorthand to null check deeply nested values. E.G `if ( this.form?.get( ‘name’ )?.value )` Is the same as: ``` if ( this.form && this.form.get( ‘name’ ) && this.form.get( ‘name’ ).value ) { ``` developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

@TheRyanSmee

3 жыл бұрын

So `formField?.dirty` is first checking if the form field exists and if it does is then checking to see if it’s been modified 😊 hopefully that helps

@krishnapanigrahi6926

3 жыл бұрын

Got it. Thank you.

Another useless tutorial on CVA. Doesn't go remotely deep enough into the topic.

@TheRyanSmee

3 жыл бұрын

It’s often a tough balancing act between teaching people everything they will need to know and bombarding them with too much information. I feel like I’ve covered most of what I use on a regular basis as an angular developer. What other stuff would you have liked to have seen?

@i-heart-google7132

3 жыл бұрын

@@TheRyanSmee you seem like a nice guy, I apologize if my comment wasn't quite 'polite'. The thing is, every tutorial on CVA demonstrates the same stuff, again, and again. I was hoping for some deeper explanation, e.g. constructor(@Self() private control: NgControl)...you get the idea. Anyway, I'll just try to investigate on my own. Good luck with your project.