https://github.com/bobbyg603/ngx-super-forms
📐🦸📋 Strongly-typed Angular form that enforces type safety at declaration via data models.
https://github.com/bobbyg603/ngx-super-forms
angular example form stackblitz
Last synced: 2 months ago
JSON representation
📐🦸📋 Strongly-typed Angular form that enforces type safety at declaration via data models.
- Host: GitHub
- URL: https://github.com/bobbyg603/ngx-super-forms
- Owner: bobbyg603
- Created: 2022-06-08T21:21:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-10T21:37:57.000Z (over 2 years ago)
- Last Synced: 2024-04-15T09:12:30.325Z (almost 2 years ago)
- Topics: angular, example, form, stackblitz
- Language: TypeScript
- Homepage: https://betterprogramming.pub/how-to-build-a-strongly-typed-angular-14-super-form-86837965a0e5
- Size: 15.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📐📋🦸 Angular Super Forms: Confirm Password
[](https://betterprogramming.pub/how-to-build-a-strongly-typed-angular-14-super-form-86837965a0e5)
[]([https://twitter.com/bobbyg603/status/1524465334522195968](https://twitter.com/bobbyg603/status/1534909164773851138))
[](https://stackblitz.com/edit/angular-ivy-1b7hxn)
This is is a companion repo for [How To Build a Strongly Typed Angular Super Form](https://betterprogramming.pub/how-to-build-a-strongly-typed-angular-14-super-form-86837965a0e5) that demonstrates a strongly typed Angular form that enforces type safety at declaration via data models.
## 🥾 Steps
Clone this repo
```sh
git clone https://github.com/bobbyg603/ng-super-forms
```
Install the dependencies
```sh
npm i
```
## 🧑🏫 Additional Learning
Inspect the form in [src/app/shirt/shirt.component.ts](https://github.com/bobbyg603/ng-super-forms/blob/ebd17cdde5e3e214e5659ff8354a044527a3bac4/src/app/shirt/shirt.component.ts#L19)
```ts
formGroup = new FormGroup>>({
quantity: new FormControl(1),
item: new FormGroup({
color: new FormControl(Color.Green as Color),
size: new FormControl(Size.medium as Size),
text: new FormControl('hello world 🌎'),
}),
});
```
Modify [src/app/shirt/shirt.ts](https://github.com/bobbyg603/ng-super-forms/blob/master/src/app/shirt/shirt.ts)
```ts
export interface Shirt {
frontText: string;
backText: string;
color: Color;
size: Size;
}
```
Fix the `formGroup` declaration error
```ts
formGroup = new FormGroup>>({
quantity: new FormControl(1),
item: new FormGroup({
color: new FormControl(Color.Green as Color),
size: new FormControl(Size.medium as Size),
frontText: new FormControl('hello world 🌎'),
backText: new FormControl('goodnight world 🌎'),
}),
});
```
## 🧑💻 Next Steps
If you liked this example, please follow me on [Medium](https://bobbyg603.medium.com/) and [X](https://twitter.com/bobbyg603), where I post programming tutorials and discuss tips and tricks that have helped make me a better programmer.
**Thank you for your support ❤️**