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

Метод 1: использование сброса формы
Самый простой способ очистить форму Angular — использовать метод reset(), предоставляемый классом FormGroup. Этот метод сбрасывает все элементы управления формы к их первоначальным значениям.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
  selector: 'app-form-component',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      // Define your form controls here
    });
  }
  onSubmit() {
    // Process form submission logic here
    this.myForm.reset();
  }
}

Метод 2: сброс отдельных элементов управления формой
Если вы хотите очистить определенные элементы управления формой, сохранив при этом другие, вы можете сбросить отдельные элементы управления с помощью методов setValue()или patchValue()..

onSubmit() {
  // Process form submission logic here
  this.myForm.get('controlName').setValue(null);
  // or
  this.myForm.patchValue({ controlName: null });
}

Метод 3. Использование форм на основе шаблонов
Для форм на основе шаблонов вы можете использовать директиву ngFormи метод resetForm()для очистки формы.

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <!-- Form controls here -->

  <button type="submit">Submit</button>
  <button type="button" (click)="myForm.resetForm()">Clear</button>
</form>

Метод 4. Использование реактивных форм с FormArray
Если ваша форма включает динамический список элементов управления формой, созданный с помощью FormArray, вы можете очистить весь массив, чтобы сбросить форму.

onSubmit() {
  // Process form submission logic here
  const formArray = this.myForm.get('arrayName') as FormArray;
  formArray.clear();
}

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