Как сбросить форму в Angular?
В Angular существует множество способов управления формами, и одна из распространенных задач — это сброс формы. Сброс формы может быть полезным в ситуациях, когда вы хотите очистить все поля после успешной отправки данных или в случае ошибки, когда вам нужно предоставить пользователю возможность начать с чистого листа.
В Angular формы могут быть управляемыми (Template-driven) или реактивными (Reactive). Мы рассмотрим оба подхода и покажем, как сбрасывать формы.
1. Управляемые формы (Template-driven Forms)
Для применения управляемых форм в Angular нужно использовать директиву ngModel. Вот как можно сбросить форму:
HTML-шаблон
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<label for="name">Имя:</label>
<input id="name" name="name" ngModel required>
<label for="email">Email:</label>
<input id="email" name="email" ngModel required>
<button type="submit">Отправить</button>
<button type="button" (click)="resetForm(myForm)">Сбросить</button>
</form>
Компонент TypeScript
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
})
export class ExampleComponent {
onSubmit(form: NgForm) {
console.log('Форма отправлена!', form.value);
// Вы можете добавить код для обработки данных здесь
}
resetForm(form: NgForm) {
form.reset();
}
}
В этом примере, используя метод reset() объекта формы, мы можем сбросить все поля формы к начальным значениям.
2. Реактивные формы (Reactive Forms)
В реактивных формах вы используете класс FormGroup для создания формы. Вот пример сброса формы:
HTML-шаблон
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">Имя:</label>
<input id="name" formControlName="name">
<label for="email">Email:</label>
<input id="email" formControlName="email">
<button type="submit">Отправить</button>
<button type="button" (click)="resetForm()">Сбросить</button>
</form>
Компонент TypeScript
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: [''],
email: ['']
});
}
ngOnInit() {
}
onSubmit() {
console.log('Форма отправлена!', this.myForm.value);
// Логика обработки данных здесь
}
resetForm() {
this.myForm.reset();
}
}
В этом примере, вызов метода reset() на объекте FormGroup позволяет сбросить все контроллеры и восстановить их в
первоначальном состоянии.
Заключение
Сброс формы в Angular — это простая, но важная задача. В зависимости от выбранного подхода (управляемые или реактивные формы), способ выполнения сброса будет различаться. В обоих случаях вы можете легко сбросить форму и подготовить её для нового ввода данных от пользователя. Используйте указанные методы в своих проектах, чтобы улучшить пользовательский опыт.