Learn How to Use Angular Typed Forms

[@TheCMajor9th]

exceptiona example ! ty Fanis

[@CodeShotsWithProfanis]

Glad you liked it!! :)

[@albertwilliams5363]

that was really helpful with good examples. Thank you!

[@CodeShotsWithProfanis]

Glad you liked it! :)

[@HenrikBgelundLavstsen]

been using rxweb/types which is just a interface patch on top of existing forms and turn the forms into types. been using that since angular 9. but i am happy that it is now part of the main. I prefer to minimize packages to avoid dealing with package updates too often.

[@galuma9321]

Standalone components are going to be really useful to optimize module imports and reduce boilerplate, I can't wait to use them. Typed forms seem kind of pointless because every native html control always uses a string value. In your video, at 7:10, we see age change from number to string in the formgroup.value as soon as you type something. To prevent that, we can build custom controls with the ControlValueAccessor interface that Angular provides to parse the string value back to number to preserve the typed value instead of going back to string but it is a lot of boilerplate. I think Angular should provide something in its own API for that. Also, with the form builder syntax that you showed, does it mean the formbuilder finally has type safety? Every useful parameter in the current API is pretty much typed any but the syntax allowed many differents ways of creating controls (via the formState parameter) : ["name"] [{value: "name", disabled: false}] etc. I am not sure why they haven't typed it properly yet. Great video nonetheless!

[@sulaimantriarjo8097]

I think the age will be converted to number automatically when it used in the ts file

[@galuma9321]

@@sulaimantriarjo8097 Typescript type safety is gone at runtime so it will be a string even though it's typed number.

[@sulaimantriarjo8097]

@@galuma9321 I used the new reactive form lately for pagination. And it recognise page as number. Before, I have to convert first to number from string

[@CodeShotsWithProfanis]

Very good catch. The input type of the field should be number instead of the default one (text). Having it with the correct type, we get the correct value. As of the formBuilder, yes it supports strict types. I tried the following and worked: username: ['string value'], I tried this and had a compilation error: username: [1], I tried this and had a compilation error: username: [ { value: 'string value', disabled: false, }, ], And finally tried this and works fine: username: this.fb.nonNullable.control({ value: 'string value', disabled: true, }),

[@aram5642]

To be completely honest with you: yes, I am glad we have strictly typed forms, but not having them didn't bother me as much as I would imagine (working woth SaaS projects). What drives me crazy though is how imperative they are. I still need to do explicit subscriptions when I have a more complex dependency among form controls (hiding/disabling one depending on the status/value of another) or when I need to debounce changes. Formly is a more declarative library, but I try not to use too many 3rd parties. And btw, condolences about the sad passing of Vangelis :(

[@CodeShotsWithProfanis]

I see what you mean, and yes they are imperative. In a past project I created a custom dynamic form generator which worked like a charm. Having this custom lib, the forms in the app were more declarative. Thanks for the condolences

[@AnimusAgent]

How would you infer the type coming from a @Input? in this case I would need to have a interface.

[@CodeShotsWithProfanis]

AFAIK this is not currently supported. You can infer the types using something like this netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28#e61e

[@mahdiandalib186]

thx for this great tutorial but plz make long videos and create real web apps using angular and mock data for backend so we can understand and learn angular better and faster...

[@fahadgaliwango4502]

Its an interesting type safety feature but only worry is increased code

[@oksanaandvovaserpiente7890]

What about validation? How to use control.errors?

[@javidg4197]

Can we run react application inside the angular application and communicate btwn them ?

[@talib7508]

Yes we can using micro frontend

[@CodeShotsWithProfanis]

@@talib7508 Yeap. That would be my response as well

[@michaelrentmeister7693]

Personally I really feel like the Angular team really dropped the ball on this feature.. MOST projects already have defined interfaces to represent their objects, like IUser. However, those interface's properties are strings, numbers, booleans, etc., not FormControl, FormControl, etc. I really dislike that they implemented the typing in such a way that makes it so you can't use your existing models.

[@hansschenker]

Suggestion: instead of defining an interface UserForm - why don't you define a type User and use it in : userForm = FormGroup() ?

[@CodeShotsWithProfanis]

Can you give an example of the User type? Is this a POJO interface?

[@devx4175]

form.patchValue does not enforce the type in regards to an absence of a field. For example, within patchForm, I can comment out age:123 and TS will not complain. However, If attempt to add another field (beyond what is defined in the FormGroup type of course) within patchForm, TS will complain. Thoughts?

[@DylanHunn]

patchValue will only update the fields you provide. You might be thinking of setValue?

[@SantiljsDOFLAMINGO]

hello, what are your vscode extensions. thanks I like your videos.

[@CodeShotsWithProfanis]

I have many extensions :) Can you list those that you liked the most so that I can send them over to you? Glad you like my videos!

[@SantiljsDOFLAMINGO]

@@CodeShotsWithProfanis I like the extension that shows the type of value that goes inside a method or function

[@CodeShotsWithProfanis]

@@SantiljsDOFLAMINGO Ohh I like this a lot :) In your settings.json file add this line "typescript.inlayHints.parameterNames.enabled": "all"

[@SantiljsDOFLAMINGO]

@@CodeShotsWithProfanis thankssss

[@biovawan]

it's difficult to create a mixed form, like: Appointment { id?: string; start: string; client: { id?: string; firstName: string; } } I get weird typing by using `form.value`: { id: string | undefined; start: string | undefined; ... } Don't know how to combine with `undefined` fields

[@CodeShotsWithProfanis]

Can you please provide a complete example or even a stackblitz?

[@sidharthsid3429]

Do you know, how to make a component reload everytime it's on view.. Like i have a form-component in sidenav, so everytime i open sidenav, i need the component inside sidenav load freshly (like go through constructor, ngOnInit..) Did you get it? I couldn't find a solution anywhere, it would help me a lot if you could help me Note : form.reset() is not what I'm looking for

[@CodeShotsWithProfanis]

Did you try using a simple *ngIf or is it something that is not allowing you for an XYZ reason to do so? As of the form.reset(), I guess you would prefer to wipe out the form. If so, you can create a nullable form, instead of a non nullable one.

[@sidharthsid3429]

@@CodeShotsWithProfanis i tried using ngif, but it seems like once ngif is used, on the second time the component just displays instead of going through constructor and ngOnInit

[@CodeShotsWithProfanis]

** @sidharth sid I have this in my app.component.html: Toggle And this is the hide-seek component: export class HideSeekComponent implements OnInit { constructor() { console.log('CTOR'); } ngOnInit(): void { console.log('INIT'); } } Since the ngIf removes the component from the DOM, it has to generate it again when the condition is satisfied. Hence, it will go through the component's lifecycle

[@sidharthsid3429]

@@CodeShotsWithProfanis holy moly, you were right..thanks alot, i literally googled documentation, stack overflow with all the words i could come up for but still got nothing Thanks alot..like really

[@CodeShotsWithProfanis]

@@sidharthsid3429 Glad it helped you :)

[@ivanfonsecabarinas5533]

el video esta excelente, pero con esta característica de Angular siento que me la paso haciendo planas, no siento que se avance en el desarrollo : (

[@devx4175]

I appreciate your content. I ask that you clarify your dev setup. It looks like you have a VS Code extension that shows controls: and formState? For example, fb.nonNullable.group(controls:{... The programmer should not type "controls: {" It is simply: this.fb.nonNullable.group({username: this.fb.nonNullable.control('someStringHere') Using as group(controls:{.. .will throw an error. Same with attempting to include formState:

[@CodeShotsWithProfanis]

Yes correct. I didn't realize that this would be a source of confusion. These are the parameter names and are enabled in VSCode JSON settings by this: "typescript.inlayHints.parameterNames.enabled": "all"