HTML、Angular、TypeScriptで実現！Angular 5 FormGroup リセット時のバリデーション処理

Angular 5 FormGroup リセットでバリデーションがリセットされない問題の解決策

この問題を解決するには、以下の方法があります。

reset() メソッドと markAsPristine() メソッドを組み合わせて使用する

this.myForm.reset();
this.myForm.markAsPristine();

フォームコントロールごとに setValue() メソッドを使用する

this.myForm.controls['firstName'].setValue('');
this.myForm.controls['lastName'].setValue('');
this.myForm.controls['email'].setValue('');

this.myForm.controls['firstName'].reset();
this.myForm.controls['lastName'].reset();
this.myForm.controls['email'].reset();

フォームグループとフォームコントロールの touched プロパティを false に設定する

this.myForm.touched = false;
this.myForm.controls['firstName'].touched = false;
this.myForm.controls['lastName'].touched = false;
this.myForm.controls['email'].touched = false;

this.myForm.errors = null;
this.myForm.controls['firstName'].errors = null;
this.myForm.controls['lastName'].errors = null;
this.myForm.controls['email'].errors = null;

これらの方法のいずれかを使用することで、FormGroup をリセットしても、バリデーションがリセットされない問題を解決することができます。

注:

• 上記のコード例は、TypeScript を使用しています。JavaScript を使用している場合は、対応するコードに変更する必要があります。
• 上記の方法は、Angular 5 より前のバージョンでは動作しない場合があります。

Angular 5 FormGroup リセットでバリデーションがリセットされない問題のサンプルコード

HTML コード

<form [formGroup]="myForm">
  <div class="form-group">
    <label for="firstName">First Name:</label>
    <input type="text" class="form-control" id="firstName" formControlName="firstName">
  </div>
  <div class="form-group">
    <label for="lastName">Last Name:</label>
    <input type="text" class="form-control" id="lastName" formControlName="lastName">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" formControlName="email">
  </div>
  <button type="button" (click)="resetForm()">Reset Form</button>
</form>

TypeScript コード

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email])
    });
  }

  ngOnInit(): void {
  }

  resetForm() {
    // this.myForm.reset(); // バリデーションがリセットされない
    // this.myForm.reset();
    // this.myForm.markAsPristine(); // バリデーションがリセットされる

    // this.myForm.controls['firstName'].setValue('');
    // this.myForm.controls['lastName'].setValue('');
    // this.myForm.controls['email'].setValue(''); // バリデーションがリセットされる

    // this.myForm.controls['firstName'].reset();
    // this.myForm.controls['lastName'].reset();
    // this.myForm.controls['email'].reset(); // バリデーションがリセットされる

    this.myForm.touched = false;
    this.myForm.controls['firstName'].touched = false;
    this.myForm.controls['lastName'].touched = false;
    this.myForm.controls['email'].touched = false;

    this.myForm.errors = null;
    this.myForm.controls['firstName'].errors = null;
    this.myForm.controls['lastName'].errors = null;
    this.myForm.controls['email'].errors = null; // バリデーションがリセットされる
  }
}

このコード例では、以下の 5 つの方法すべてを実装しています。

• 上記のコード例は、あくまでサンプルです。実際の使用状況に合わせて、コードを適宜変更する必要があります。

Angular 5 FormGroup リセットでバリデーションがリセットされない問題の解決策：その他の方法

サブスクリプションを使用する

this.myForm.statusChanges.subscribe(() => {
  if (this.myForm.status === 'VALID') {
    // バリデーションがリセットされたことを処理する
  }
});

カスタムバリデーションディレクティブを作成する

import { Directive, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[appResetValidation]'
})
export class ResetValidationDirective {

  @Input() formGroup: FormGroup;
  @Output() validationReset = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.formGroup.statusChanges.subscribe(() => {
      if (this.formGroup.status === 'VALID') {
        this.validationReset.emit();
      }
    });
  }
}

フォームの状態を管理するサービスを作成する

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FormStateService {

  private formStateSubject = new BehaviorSubject<boolean>(false);
  formState = this.formStateSubject.asObservable();

  resetFormState() {
    this.formStateSubject.next(true);
  }
}

フォームの状態をグローバル変数で管理する

export let formState = false;

resetFormState() {
  formState = true;
}

これらの方法は、より複雑な状況で使用される場合があります。