#Angular introduces Signal Forms in version 21.0, marking a significant shift in how users interact with Angular applications.
The best part? Creating a signal-based form is surprisingly simple.
In just 4 steps, you can build a fully functional signal-based Login Form 👇
👉 Step 1 - Define type
```export interface IUser {
email: string;
password: string;```
}
👉 Step 2 - Create Model
```user : WritableSignal<IUser> = signal({
email: '',
password: ''
})```
👉 Step 3 - Create Signal Form
```loginForm = form(this.userModel,(schema)=>{
required(
schema.email,{message:'email is required'});
email(
schema.email,{message:'email is not valid'});
required(schema.password,{message:'password is required'});
});```
👉 Step 4 - Use on Template
```<form (submit)="onSubmit($event)">
<label>
Email
<input type="email" [formField]="
loginForm.email" />
</label>
@if (
loginForm.email().invalid() &&
loginForm.email().touched()) {
<div class="error">
@for (error of
loginForm.email().errors(); track error.kind) {
<span>{{ error.message }}</span>
}
</div>
}
<label>
Password
<input type="password" [formField]="loginForm.password" />
</label>
@if (loginForm.password().invalid() && loginForm.password().touched()) {
<div class="error">
@for (error of loginForm.password().errors(); track error.kind) {
<span>{{ error.message }}</span>
}
</div>
}
<button [disabled]="loginForm().invalid()" type="submit">Login</button>
</form>```
This is it. A signal-based login form has been created.
To learn in depth about Signal forms, models, validations, custom validations, async validations, etc., join India's Largest
#Angular Conference,
#ngIndia on 11 April.
Tickets -
ng-ind.com/home
#ngIndia #nomadcoder #angular