Angular 2 フォーム リセット方法

Angular 2でフォーム送信後のクリア方法

Angular 2では、フォーム送信後にデータをリセットする方法がいくつかあります。以下はその方法です。

FormResetDirectiveを使用する

• フォームの送信ボタンをクリックすると、フォームがリセットされます。
• フォーム要素にformResetDirectiveを適用します。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <button type="submit">送信</button>
  <button type="button" [formReset]="myForm">リセット</button>
</form>

FormのsetValue()メソッドを使用する

• フォームのsetValue()メソッドを使用して、フォームコントロールの値を空のオブジェクトに設定します。

onSubmit() {
  // フォームの処理
  this.myForm.reset();
}

フォームコントロールのpatchValue()メソッドを使用する

• フォームコントロールのpatchValue()メソッドを使用して、個々のコントロールの値をリセットします。

onSubmit() {
  // フォームの処理
  this.myForm.controls['fieldName'].patchValue('');
}

ReactiveFormsModuleのresetForm()メソッドを使用する

• resetForm()メソッドを使用して、フォーム全体をリセットします。

onSubmit() {
  // フォームの処理
  this.myForm.resetForm();
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">
  <button type="submit">   送信</button>
  <button type="button" [formReset]="myForm">リセット</button>
</form>

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.compo   nent.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup   ({
      firstName: new FormControl(''),
      lastName: new FormControl('')
    });
  }

  onSubmit() {
    // フォームの処理
  }
}

onSubmit() {
  // フォームの処理
  this.myForm.setValue({
    firstName: '',
    lastName: ''
  });
}

onSubmit() {
  // フォームの処理
  this.myForm.controls['firstName'].patchValue('');
  this.myForm.controls['lastName'].patchValue('');
}

onSubmit() {
  // フォームの処理
  this.myForm.resetForm();
}

TemplateRefを使用する

• フォーム送信後に、別のテンプレートに切り替えることで、フォームをリセットすることができます。
• フォーム要素にngTemplateOutletディレクティブを使用して、フォームのテンプレートを別のテンプレートに埋め込みます。

<ng-template #myFormTemplate>
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    </form>
</ng-template>

<div *ngIf="showForm">
  <ng-container *ngTemplateOutlet="myFormTemplate"></ng-container>
</div>

<button (click)="showForm = false">リセット</button>

import { Component } from '@angular/core';

@Component({
  // ...
})
export class MyFormComponent {
  showForm = true;
  // ...
}

ViewChildを使用する

• フォーム送信後に、form.nativeElement.reset()を使用してフォームをリセットします。
• @ViewChild('form') form: ElementRefを使用して、フォーム要素への参照を取得します。
• フォーム要素に#formというテンプレート変数を割り当てます。

<form #form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  </form>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // ...
})
export class MyFormComponent {
  @ViewChild('form') form: ElementRef;
  // ...

  onSubmit() {
    // フォームの処理
    this.form.nativeElement.reset();
  }
}