Bagaimana cara menghapus formulir setelah mengirimkan di Angular 2?

Saya memiliki beberapa komponen 2 sudut sederhana dengan template. Bagaimana cara menghapus formulir dan semua bidang setelah dikirim ?. Saya tidak dapat memuat ulang halaman. Setelah data set dengan date.setValue('')field stil touched.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

loading-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>

Lihat juga https://angular.io/docs/ts/latest/guide/reactive-forms.html (bagian "setel ulang bendera formulir")

> = RC.6

Di RC.6 itu harus didukung untuk memperbarui model formulir. Membuat grup formulir baru dan menetapkan kemyForm

[formGroup]="myForm"

juga akan didukung ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

Dalam modul formulir baru (> = RC.5) NgFormmemiliki reset()metode dan juga mendukung resetacara formulir . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Ini akan berhasil:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

Lihat juga

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/6169
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/4914
• https://github.com/angular/angular/issues/6371

Pada Angular2 RC5, myFormGroup.reset()sepertinya berhasil.

Untuk mengatur ulang formulir Anda setelah mengirimkan, Anda cukup memanggil this.form.reset(). Dengan memanggilnya reset()akan:

1. Tandai kontrol dan kontrol anak sebagai murni .
2. Tandai kontrol dan kontrol anak sebagai tidak tersentuh .
3. Tetapkan nilai kontrol dan kontrol anak ke nilai kustom atau null .
4. Perbarui nilai / validitas / kesalahan pihak yang terpengaruh.

Silakan temukan permintaan tarik ini untuk jawaban terperinci. FYI, PR ini telah digabungkan menjadi 2.0.0.

Semoga ini dapat membantu dan beri tahu saya jika Anda memiliki pertanyaan lain terkait Formulir Angular2.

Lakukan Panggilan clearForm();di file .ts Anda

Coba seperti potongan kode contoh di bawah ini untuk menghapus data formulir Anda.

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

Berikut adalah cara saya melakukannya di Angular 7.3

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

Tidak perlu menelepon form.clearValidators()

Inilah cara saya melakukannya Angular 8:

Dapatkan referensi lokal untuk formulir Anda:

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

Dan kapan pun Anda perlu mengatur ulang formulir, resetFormmetode panggilan :

this.myForm.resetForm();

Anda akan perlu FormsModuledari @angular/formsuntuk itu untuk bekerja. Pastikan untuk menambahkannya ke impor modul Anda.

Untuk versi sudut 4, Anda dapat menggunakan ini:

this.heroForm.reset();

Tapi, Anda mungkin membutuhkan nilai awal seperti:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

Penting untuk menyelesaikan masalah nol dalam referensi objek Anda.

link referensi , Cari "setel ulang bendera formulir".

Ada diskusi baru tentang ini ( https://github.com/angular/angular/issues/4933 ). Sejauh ini hanya ada beberapa peretasan yang memungkinkan untuk menghapus formulir, seperti membuat ulang seluruh formulir setelah mengirimkan: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Saya menemukan solusi lain. Agak hacky tetapi tersedia secara luas di dunia angular2.

Karena direktif * ngIf menghapus formulir dan membuatnya kembali, seseorang cukup menambahkan * ngIf ke formulir dan mengikatnya ke beberapa jenis formSuccessfullySentvariabel. => Ini akan membuat ulang formulir dan karena itu mengatur ulang status kontrol input.

Tentu saja, Anda juga harus menghapus variabel model. Saya merasa nyaman memiliki kelas model khusus untuk bidang formulir saya. Dengan cara ini saya dapat mengatur ulang semua bidang sesederhana membuat instance baru dari kelas model ini. :)

Hm, sekarang (23 Jan 2017 dengan angular 2.4.3) saya bikin seperti ini:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Kode di bawah ini berfungsi untuk saya di Angular 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

this.myForm.reset ();

Ini semua cukup ... Anda bisa mendapatkan hasil yang diinginkan

Untuk mengatur ulang formulir lengkap setelah pengiriman, Anda dapat menggunakan reset () di Angular. Contoh di bawah ini diterapkan di Angular 8. Di bawah ini adalah formulir Berlangganan di mana kami mengambil email sebagai input.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

Lihat dokumen resmi: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}