Reactive Forms
- Reactive forms, on the other hand, are created programmatically in the component class. They offer more flexibility and are well-suited for complex forms with intricate validation needs
Example:
Step 1: Create an Angular project using Angular CLI.
ng new angular-forms
Step 2: Create a new component message
ng g c form-component
Step 3: Now create the form in the ‘form-component.component.html’.
<div class="container">
<h2>Reactive Form Example</h2>
<form [formGroup]="userForm" (ngSubmit)="submit()">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" formControlName="name" />
</div>
<pre></pre>
<div class="form-group">
<label for="name">Email:</label>
<input type="email" id="email" formControlName="email" />
</div>
<pre></pre>
<div class="form-group">
<label for="name">Password:</label>
<input type="password" id="password" formControlName="password" />
</div>
<pre></pre>
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
</div>
Step 4: Edit the 'form-component.component.ts' to define the function and attributes.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form-component',
templateUrl: './form-component.component.html',
styleUrls: ['./form-component.component.css']
})
export class FormComponentComponent {
userForm: FormGroup
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
submit() {
if (this.userForm.valid) {
console.log('Form Submitted', this.userForm.value);
}
}
}
Step 5: Add CSS to ‘form-component.component.css’ for better styling.
div {
text-align: center;
}
label {
text-align: left;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
Step 6: Add the ‘<app-form-component></app-form-component>’ to the ‘app.component.html’ to include the ‘Form-Component’ in the main application. Also, add the ReactiveFormsModule in ‘app.module.ts’.
<app-form-component></app-form-component>
Step 7: Now run or compile the application.
ng serve
You will see the result on http://localhost:4200