In Angular, forms are a critical part of building applications that collect and validate user input. Angular provides two types of forms: Template-driven forms and Reactive forms. Both types of forms allow you to define the structure of your form and validate user input.
Here is an overview of each type of form:
Template-driven forms: These forms are defined entirely in the template of a component using directives. The form controls are bound to properties on the component, and validation is done using Angular directives.
Here is an example of how to create a simple template-driven form:
html
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<input type="text" name="name" ngModel required>
<input type="email" name="email" ngModel required email>
<button type="submit">Submit</button>
</form>
In the above example, we use the ngForm directive to define our form and the ngModel directive to bind our form controls to component properties. We also use the required and email directives to validate the form controls.
Reactive forms: These forms are defined programmatically in the component class using the FormBuilder service. Form controls are created using the FormControl class, and form groups are created using the FormGroup class.
Here is an example of how to create a simple reactive form:
typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<input type="text" formControlName="name">
<input type="email" formControlName="email">
<button type="submit">Submit</button>
</form>
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
console.log(this.myForm.value);
}
}
In the above example, we create our form using the FormBuilder service and define our form controls using the FormControl class. We also define our validation rules using the Validators class.
Both types of forms allow you to create complex forms with validation and custom validation logic. Template-driven forms are typically easier to use for simple forms, while reactive forms provide more control and flexibility for complex forms.
0 Comments