При работе с формами в Angular поля формы обычно очищаются после отправки данных. Это обеспечивает лучшее взаимодействие с пользователем и помогает избежать путаницы, если пользователю потребуется ввести другой набор данных. В этой статье блога мы рассмотрим различные методы очистки форм после отправки в Angular, а также приведем примеры кода.

Метод 1: использование ссылочной переменной шаблона
Один из самых простых способов очистить форму после отправки — использовать ссылочную переменную шаблона. Вот пример:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input type="text" name="name" ngModel>
  <input type="email" name="email" ngModel>
  <button type="submit">Submit</button>
</form>

В классе компонента вы можете получить доступ к форме, используя ссылочную переменную шаблона myForm, и сбросить ее после отправки:

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  onSubmit(form: NgForm) {
    // Process form data
    // Reset the form
    form.reset();
  }
}

Метод 2: использование реактивных форм
Если вы используете реактивные формы в Angular, вы можете очистить форму, сбросив значения элементов управления формой. Вот пример:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: [''],
      email: ['']
    });
  }
  onSubmit() {
    // Process form data
    // Reset the form controls
    this.myForm.reset();
  }
}

Метод 3: очистка полей формы вручную
Вы также можете очистить поля формы вручную, открыв элементы управления формы и установив для них пустые или нулевые значения. Вот пример:

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  @ViewChild('myForm', { static: false }) form: NgForm;
  onSubmit() {
    // Process form data
    // Clear form fields manually
    this.form.controls['name'].setValue('');
    this.form.controls['email'].setValue('');
  }
}

В этой статье мы рассмотрели различные методы очистки форм после отправки в Angular. Вы можете использовать ссылочную переменную шаблона, сбросить элементы управления формы в реактивных формах или вручную очистить поля формы. Выберите метод, который лучше всего соответствует требованиям вашего проекта и обеспечивает удобство использования.