This content originally appeared on Bits and Pieces - Medium and was authored by Teslenko Oleh
In this article, I want to show you how to create typed forms in Angular.
Although it’s possible to create forms without types, it’s not the best choice when building something great.
Using types in your Angular forms can help catch errors early in the development process, improve code readability and maintainability, and enhance the overall developer experience.
Let’s get started.
First of all, we need to create a simple form using FormGroup:
// typescript file
public userForm: FormGroup;
this.userForm = new FormGroup<any>({
id: 0,
name: 'John',
email: 'test@email.com',
password: '123456',
createdAt: new Date()
});
// html file
<form [formGroup]="userForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" formControlName="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" formControlName="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" formControlName="password">
</div>
<button type="submit" class="btn btn-primary" [disabled]="!userForm.valid">Submit</button>
</form>
As you can see, the type of the form is ‘any’. If we want to add types, we should create an interface:
interface IUserForm {
id: FormControl<number | null>;
name: FormControl<string | null>;
email: FormControl<string | null>;
password: FormControl<string | null>;
createdAt: FormControl<Date | null>;
}In this example, we’ve created an interface with FormControl and a special type in <...>.
Next, we add new FormControl() to our FormGroup:
this.userForm = new FormGroup<IUserForm>({
id: new FormControl<number>(0),
name: new FormControl<string>('John'),
email: new FormControl<string>('test@email.com'),
password: new FormControl<string>('123456'),
createdAt: new FormControl<Date>(new Date())
});Finally, we add our interface to the userForm variable, and that's all you need to get a typed form.
public userForm: FormGroup<IUserForm>;
// FINAL RESULT
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
interface IUserForm {
id: FormControl<number | null>;
name: FormControl<string | null>;
email: FormControl<string | null>;
password: FormControl<string | null>;
createdAt: FormControl<Date | null>;
}
@Component({
selector: 'app-typed-form-group',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './typed-form-group.component.html',
styleUrls: ['./typed-form-group.component.scss']
})
export class TypedFormGroupComponent {
public userForm: FormGroup<IUserForm>;
constructor() {
this.userForm = new FormGroup<IUserForm>({
id: new FormControl<number>(0),
name: new FormControl<string>('John'),
email: new FormControl<string>('test@email.com'),
password: new FormControl<string>('123456'),
createdAt: new FormControl<Date>(new Date())
});
}
}
There’s one more thing to mention about creating FormGroup: you can use FormBuilder to make things even easier.
The FormBuilder provides syntactic sugar that shortens the process of creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.
Here's how you can use it:
constructor(private fb: FormBuilder) {
this.userForm = fb.group<IUserForm>({
id: fb.control<number>(0),
name: fb.control<string>('John'),
email: fb.control<string>('test@email.com'),
password: fb.control<string>('123456'),
createdAt: fb.control<Date>(new Date())
});
}From here, we can then look to use a tool such as Bit to turn our code into an independent component that we can use and reuse across any projects that require it.
How to Share Angular Components Between Projects and Apps
Here are a few useful links from the Angular documentation:
Remember to use types and be happy!
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Introducing Angular Component Development Environment
- Top 8 Tools for Angular Development in 2023
- Getting Started with a New Angular Project in 2023
- How We Build Micro Frontends
- How we Build a Component Design System
- Creating a Developer Website with Bit components
How to Create Typed Forms in Angular was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Teslenko Oleh
Teslenko Oleh | Sciencx (2023-05-01T13:19:46+00:00) How to Create Typed Forms in Angular. Retrieved from https://www.scien.cx/2023/05/01/how-to-create-typed-forms-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.