Angular markAsPristine() Example
In this article we will learn to use markAsPristine() method in our Angular application.
1. The markAsPristine() is the method of Angular AbstractControl class that marks a control as pristine.
2. A control is considered to be pristine if the user has not yet changed the value in the UI. For example when a control or any form is displayed in UI and user has not yet interacted with UI then the status of that control or form is pristine.
3. We can programmatically mark a control pristine using markAsPristine() method of AbstractControl. When we call markAsPristine() on a control, the value of pristine of that control becomes true.
In this article I will create a form validation application and use markAsPristine() method to mark controls pristine programatically.
Using markAsPristine()
The markAsPristine() is the method of AbstractControl class that marks the control as pristine.
markAsPristine(opts: { onlySelf?: boolean; } = {}): void
When onlySelf is true, the method marks pristine only this control otherwise all direct ancestors are marked pristine. The default is false.
Suppose we have created a form as following.
teamForm: FormGroup = this.formBuilder.group({
teamName: ['', Validators.required],
employees: this.formBuilder.array([
new FormControl('', [Validators.required]),
new FormControl('', [Validators.required])
])
});
Now call markAsPristine() on the form controls.
1. For FormControl :
this.teamForm.get('teamName')?.markAsPristine();
FormArray :
this.teamForm.get('employees')?.markAsPristine();
3. For FormGroup :
this.teamForm.markAsPristine();
Find the code to use onlySelf with markAsPristine() method.
this.teamForm.get('teamName')?.markAsPristine({onlySelf: true});
For the value of onlySelf as
true : marks pristine only self.
false : marks pristine all direct ancestors. This is default value.
Complete Example
In this example, I will create a reactive form with required validator. To show the usability of markAsPristine(), I have created a button that will call a method inside which I am calling markAsPristine() on each control. I am also displaying the value of pristine on UI that will change to true once we call markAsPristine() method.
team.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormArray, Validators, FormBuilder, ReactiveFormsModule, FormControl } from '@angular/forms';
import { TeamService } from './team.service';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-team',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule
],
templateUrl: './team.component.html'
})
export class TeamComponent {
formSubmitted = false;
constructor(
private formBuilder: FormBuilder,
private teamService: TeamService) {
}
teamForm: FormGroup = this.formBuilder.group({
teamName: ['', Validators.required],
employees: this.formBuilder.array([
new FormControl('', [Validators.required]),
new FormControl('', [Validators.required])
])
});
get employees(): FormArray {
return this.teamForm.get('employees') as FormArray;
}
onFormSubmit() {
this.teamService.saveTeam(this.teamForm.value);
this.formSubmitted = true;
this.teamForm.reset();
}
markPristine() {
this.teamForm.get('teamName')?.markAsPristine();
this.teamForm.get('employees')?.markAsPristine();
//this.teamForm.markAsPristine();
this.formSubmitted = false;
}
}
team.component.html
<h3>Demo: markAsPristine()</h3>
<div *ngIf="formSubmitted && teamForm.pristine" class="submitted"> Form submitted successfully. </div>
<div class="team">
<form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
<p>Team Name* : <input formControlName="teamName">
<br /><label *ngIf="!teamForm.get('teamName')?.pristine && teamForm.get('teamName')?.hasError('required')" class="error">
Team name required. </label>
</p>
Employees in Team* : <br><br>
<div formArrayName="employees">
<div *ngFor="let emp of employees.controls; let idx = index">
<input [formControlName]="idx"> <br/><br/>
</div>
<label *ngIf="!teamForm.get('employees')?.pristine && teamForm.get('employees')?.invalid" class="error">
Employees required. </label>
</div>
<button type="button" (click)="markPristine()">MARK AS PRISTINE</button>
<br/><button>SUBMIT</button>
</form>
</div>
<br/><b>Form Pristine</b> : {{teamForm.pristine}}
<br/><br/><b>Pristine controls: </b>
<br/><br/><b>teamName</b> : {{teamForm.get('teamName')?.pristine}}
<br/><b>employees</b> : {{teamForm.get('employees')?.pristine}}
team.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class TeamService {
saveTeam(data: any) {
const team = JSON.stringify(data);
console.log(team);
}
}
Find the print screen of the output.
