Livecode: Angular Unidirectional Template-driven Forms with signals

[@AgustinCampon]

This is really a very neat approach, leveraging declarative code, looking forward for the course to be completed!

[@pick_simplified]

Thanks!!! ❤

[@pick_simplified]

The course is ready 🎉

[@alexandrumacavei7323]

Can't wait to start migrating to these type of forms in our app! Would be nice if you could show an example with dynamic forms that contain arrays of form controls.

[@0ni0ng0ld-g6i]

This is awesome, thank you!

[@pick_simplified]

Thanks!!

[@noob_dodger]

wow, great content, thank you!

[@pick_simplified]

Glad you liked it!! Thanks

[@qvisten999]

Great videos. Did you ever create and example with Arrays?

[@pick_simplified]

Yes I did, blog.simplified.courses/template-driven-forms-with-form-arrays/

[@anutaNYC]

Can you do this on reactive forms?

[@pick_simplified]

I don't think it makes sense for reactive forms tbh

[@anutaNYC]

Oh, I got it! I was just looking into signals and feel like using them everywhere

[@pick_simplified]

Haha I can relate to that@@anutaNYC

[@tleveque]

I see a problem with this approach. If you need to disable an input in the form, it will not be part of the valueChange event. And because you use the set method on your signal, you will loose the value of the "disabled" input.

[@pick_simplified]

Thank you so much for raising this! Indeed, with the update function and destructuring both values the value is kept! I will dig deeper and add this to my course and also my free content! Stay awesome! thx!

[@tleveque]

@@pick_simplified But you won’t be able to directly use the update function in the form tag. You will have to call a method in your component to do that. Maybe there’s another way….

[@pick_simplified]

@@tleveque You are stealing my sleep! But that's a good thing haha🚀I usually do that in the component because I also want to run shapes for typesafety (still have to create free content for that) but you are right! I'm going to think about it. Thanks for your input

[@pick_simplified]

@@tleveque I fixed it by mapping the valueChanges to the raw value of the form🤩

[@tleveque]

@@pick_simplified Can you give more details? Do you have an updated Stackblitz?

[@esdegan7176]

L I K E

[@pick_simplified]

Thank you!!!

[@draylegend]

I've the following form directive:
@Directive({
selector: 'form',
standalone: true,
exportAs: 'appForm',
})
export class FormDirective extends NgForm {
#ngForm = inject(NgForm);
valueSignal = toSignal(this.#ngForm.valueChanges!);
#disabledChanges: Observable = this.#ngForm.statusChanges!.pipe(
map(s => s === 'INVALID'),
);
disabledSignal = toSignal(this.#disabledChanges);
}
Usage:


How to make valueSignal typesafe?

[@pick_simplified]

You can't if you use ngForm directly. However in my latest form directive there is a formValueChange output, that is typesafe. You can check it here: blog.simplified.courses/i-opensourced-my-angular-template-driven-forms-solution/