Angular Reactive Forms：フォームを初期状態に戻しつつ、入力データを保持する方法
Angular でフォームをプリスティン状態に設定する方法（データ消去なし）
しかし、単に form.reset() を呼び出すと、フォームに入力されたデータもすべて消去されてしまいます。場合によっては、データは保持したいが、フォームの状態だけをプリスティンにしたいというケースがあります。
そこで今回は、Angular Reactive Forms を使用して、フォームをプリスティン状態に設定しつつ、入力されたデータを保持する方法について解説します。
各フォームコントロールには、markAsPristine() メソッドが用意されています。このメソッドを呼び出すことで、そのコントロールをプリスティン状態に設定することができます。
this.myFormControl.markAsPristine();
この方法の利点は、個々のフォームコントロールを個別にプリスティン状態に設定できることです。一方、複数のフォームコントロールを一括でプリスティン状態に設定したい場合は、以下の方法が適しています。
this.myFormGroup.resetForm();
この方法の利点は、フォームグループ内のすべてのフォームコントロールをまとめてプリスティン状態に設定できることです。
フォームグループの patchValue() メソッドを使用して、フォームコントロールの値を個別に更新することもできます。この場合、pristine 属性を true に設定することで、そのコントロールをプリスティン状態に設定することができます。
this.myFormGroup.patchValue({
myFormControl: {
value: this.myFormControl.value,
pristine: true
}
});
上記のように、Angular Reactive Forms には、フォームをプリスティン状態に設定しつつ、入力されたデータを保持する方法がいくつか用意されています。それぞれの方法の利点を理解し、状況に応じて適切な方法を選択してください。
補足:
- 上記のコード例は、Angular 8 以降を使用していることを前提としています。
Angular Reactive Forms でフォームをプリスティン状態に設定する サンプルコード
フォームコントロールの markAsPristine() メソッドを使用する
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-form-control-pristine',
template: `
<input type="text" [(ngModel)]="myFormControl.value">
<button (click)="markAsPristine()">プリスティン状態に設定</button>
`
})
export class FormControlPristineComponent implements OnInit {
myFormControl = new FormControl('', Validators.required);
constructor() { }
ngOnInit() { }
markAsPristine() {
this.myFormControl.markAsPristine();
}
}
このコードでは、myFormControl というフォームコントロールを作成し、markAsPristine() メソッドを使用してプリスティン状態に設定しています。
フォームグループの resetForm() メソッドを使用する
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form-group-pristine',
template: `
<form [formGroup]="myFormGroup">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
<button type="button" (click)="resetForm()">プリスティン状態に設定</button>
</form>
`
})
export class FormGroupPristineComponent implements OnInit {
myFormGroup = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required)
});
constructor() { }
ngOnInit() { }
resetForm() {
this.myFormGroup.resetForm();
}
}
フォームグループの patchValue() メソッドを使用する
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form-group-patch-value',
template: `
<form [formGroup]="myFormGroup">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
<button type="button" (click)="patchValue()">プリスティン状態に設定</button>
</form>
`
})
export class FormGroupPatchValueComponent implements OnInit {
myFormGroup = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required)
});
constructor() { }
ngOnInit() { }
patchValue() {
this.myFormGroup.patchValue({
firstName: this.myFormGroup.get('firstName').value,
lastName: this.myFormGroup.get('lastName').value,
pristine: true
});
}
}
これらのサンプルコードを参考に、ご自身の状況に合わせてフォームをプリスティン状態に設定してください。
Angular Reactive Forms でフォームをプリスティン状態に設定する その他の方法
フォームコントロールの setValue() メソッドを使用する
setValue() メソッドを使用して、フォームコントロールの値を空のオブジェクトに設定することもできます。これにより、フォームコントロールの値は保持されますが、pristine 属性は true に設定され、フォームコントロールはプリスティン状態になります。
this.myFormControl.setValue({});
reset() メソッドを使用して、フォームグループを初期状態にリセットすることもできます。この場合、pristine 属性も true に設定されますが、フォームコントロールの値はすべて消去されてしまいます。
this.myFormGroup.reset();
カスタムバリデーションロジックを使用して、フォームコントロールの状態を制御することもできます。例えば、以下のようなカスタムバリデーションロジックを作成することができます。
import { AbstractControl, ValidationErrors } from '@angular/forms';
export function pristineValidator(control: AbstractControl): ValidationErrors | null {
if (control.pristine) {
return { pristine: true };
} else {
return null;
}
}
このカスタムバリデーションロジックを使用すると、フォームコントロールがプリスティン状態である場合にのみエラーメッセージを表示することができます。
RxJS を使用して、フォームコントロールの状態を監視し、プリスティン状態になったときに処理を実行することもできます。例えば、以下のようなコードで myFormControl がプリスティン状態になったときにコンソールにログを出力することができます。
import { fromEvent } from 'rxjs';
fromEvent(this.myFormControl, 'statusChange')
.pipe(
filter(event => event.status === 'PRISTINE')
)
.subscribe(() => {
console.log('Form control is pristine');
});
angular angular-reactive-forms
