First, you need to import the required modules in your component:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
Then, you can create the form using the FormBuilder
service:
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
message: ['', Validators.required]
});
}
}
In this example, the myForm
property holds the reactive form instance. The createForm
method uses the FormBuilder
service to create the form and define its fields with initial values and validators. The name
field is required, the email
field is required and must be a valid email address, and the message
field is required.
Now, you can use this form in your template:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">Name:</label>
<input type="text" id="name" formControlName="name">
<div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
<div *ngIf="myForm.get('name').errors.required">Name is required.</div>
</div>
<label for="email">Email:</label>
<input type="email" id="email" formControlName="email">
<div *ngIf="myForm.get('email').invalid && (myForm.get('email').dirty || myForm.get('email').touched)">
<div *ngIf="myForm.get('email').errors.required">Email is required.</div>
<div *ngIf="myForm.get('email').errors.email">Invalid email format.</div>
</div>
<label for="message">Message:</label>
<textarea id="message" formControlName="message"></textarea>
<div *ngIf="myForm.get('message').invalid && (myForm.get('message').dirty || myForm.get('message').touched)">
<div *ngIf="myForm.get('message').errors.required">Message is required.</div>
</div>
<button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>
In this example, the formGroup
directive binds the myForm
instance to the form element. The formControlName
directive binds each form control to the corresponding field in the myForm
instance. The *ngIf
directives display error messages for each field if it's invalid and has been touched or is dirty.
Finally, you can handle the form submission in your component:
onSubmit() {
// Do something with the form data
}
This is a basic example, but you can add more validation rules and custom validators as needed.