Angular2 フォーム：送信時にバリデーションをリセットして再入力させる
Angular2 フォーム送信時にフォームバリデーションをリセットする方法
方法 1: formSubmitted イベントを使用する
formSubmitted イベントは、フォームが送信されたときに発生するイベントです。このイベントを利用して、以下のコードのようにバリデーションをリセットできます。
@Component({
selector: 'my-app',
template: `
<form (ngSubmit)="onSubmit()">
<input type="text" name="name" required #nameInput>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
onSubmit() {
this.nameInput.nativeElement.form.resetForm();
}
}
このコードでは、onSubmit メソッドの中で formSubmitted イベントが発生した際に、nameInput ディレクティブの nativeElement プロパティを使用して、フォーム要素にアクセスしています。そして、resetForm メソッドを呼び出して、フォームバリデーションをリセットしています。
方法 2: FormBuilder を使用する
FormBuilder は、Angular2 フォームを作成するためのクラスです。このクラスには、reset メソッドがあり、以下のコードのようにバリデーションをリセットできます。
@Component({
selector: 'my-app',
template: `
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<input type="text" name="name" required formControlName="name" #nameInput>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup = this.fb.group({
name: ['', Validators.required],
});
}
onSubmit() {
this.formGroup.reset();
}
}
このコードでは、FormBuilder を使用してフォームグループを作成しています。そして、onSubmit メソッドの中で formGroup.reset メソッドを呼び出して、フォームバリデーションをリセットしています。
どちらの方法を使うべきか
どちらの方法を使うべきかは、状況によって異なります。
- フォーム要素に直接アクセスしたい場合は、方法 1 を使用します。
- フォームグループを使用している場合は、方法 2 を使用します。
上記以外にも、以下の方法でバリデーションをリセットできます。
ReactiveFormsModuleのFormControlのsetValueメソッドを使用するTemplateDrivenFormsのform.resetメソッドを使用する
- Angular2 フォームバリデーションは、フォームの入力値が正しく入力されていることを確認するために使用されます。
- フォームバリデーションをリセットすると、フォームの入力値がすべて消去されます。
- フォームバリデーションをリセットする場合は、ユーザーが意図的に入力した値が失われないように注意する必要があります。
@Component({
selector: 'my-app',
template: `
<form (ngSubmit)="onSubmit()">
<input type="text" name="name" required #nameInput>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
onSubmit() {
this.nameInput.nativeElement.form.resetForm();
}
}
@Component({
selector: 'my-app',
template: `
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<input type="text" name="name" required formControlName="name" #nameInput>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup = this.fb.group({
name: ['', Validators.required],
});
}
onSubmit() {
this.formGroup.reset();
}
}
@Component({
selector: 'my-app',
template: `
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<input type="text" name="name" required formControlName="name" #nameInput>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup = this.fb.group({
name: ['', Validators.required],
});
}
onSubmit() {
this.formGroup.get('name').setValue('');
}
}
@Component({
selector: 'my-app',
template: `
<form #myForm (ngSubmit)="onSubmit()">
<input type="text" name="name" required [(ngModel)]="name">
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
name: string = '';
onSubmit() {
myForm.reset();
}
}
説明
- フォームの作成:
formGroupプロパティを使用して、FormBuilderを使ってフォームグループを作成します。nameという名前のFormControlをフォームグループに追加します。requiredバリデーターを使用して、nameコントロールが必須であることを指定します。
- フォーム送信時の処理:
onSubmitメソッドが呼び出されます。- フォームバリデーションをリセットします。
- フォーム送信処理を実行します。
- 実際のアプリケーションでは、必要に応じてコードを追加したり変更したりする必要があります。
@Component({
selector: 'my-app',
template: `
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<form-array name="items" formControlName="items">
<div *ngFor="let item of formGroup.get('items').controls; let i = index">
<input type="text" name="{{i}}" formControlName="{{i}}">
</div>
<button type="button" (click)="addItem()">アイテムを追加</button>
</form-array>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup = this.fb.group({
items: this.fb.array([]),
});
}
addItem() {
this.formGroup.get('items').push(this.fb.control(''));
}
onSubmit() {
this.formGroup.get('items').reset();
}
}
このコードでは、FormArray を使用して、複数のテキスト入力フィールドをグループ化しています。そして、addItem メソッドを使用して、新しいテキスト入力フィールドを追加しています。onSubmit メソッドの中で formGroup.get('items').reset() メソッドを呼び出して、すべてのテキスト入力フィールドのバリデーションをリセットしています。
TemplateDrivenForms の ngModelGroup ディレクティブを使用する
ngModelGroup ディレクティブは、テンプレート駆動型フォームでフォームグループを管理するために使用されます。ngModelGroup ディレクティブと reset ディレクティブを組み合わせることで、以下のコードのようにバリデーションをリセットできます。
@Component({
selector: 'my-app',
template: `
<form #myForm (ngSubmit)="onSubmit()">
<div ngModelGroup="user">
<input type="text" name="name" required ngModel #nameInput>
<input type="email" name="email" required ngModel>
</div>
<button type="submit">送信</button>
</form>
`,
})
export class AppComponent {
onSubmit() {
nameInput.resetForm();
}
}
このコードでは、ngModelGroup ディレクティブを使用して、user という名前のフォームグループを作成しています。そして、name と email という名前の 2 つの入力フィールドをフォームグループに追加しています。onSubmit メソッドの中で nameInput.resetForm() メソッドを呼び出して、name 入力フィールドのバリデーションをリセットしています。
カスタムバリデーションディレクティブを作成する
カスタムバリデーションディレクティブを作成して、フォーム送信時にバリデーションをリセットすることもできます。
サードパーティのライブラリを使用する
Angular2 には、フォームバリデーションをリセットするためのサードパーティのライブラリがいくつかあります。
- フォームグループを使用している場合は、
FormArrayのresetメソッドを使用するのが簡単です。 - テンプレート駆動型フォームを使用している場合は、
ngModelGroupディレクティブとresetディレクティブを使用するのが簡単です。 - より複雑なロジックが必要な場合は、カスタムバリデーションディレクティブを作成するか、サードパーティのライブラリを使用する必要があります。
angular angular2-forms
