Angular 2'de gönderdikten sonra form nasıl temizlenir?

Şablonlu basit bir açısal 2 bileşenim var. Gönderdikten sonra form ve tüm alanlar nasıl temizlenir ?. Sayfayı yeniden yükleyemiyorum. date.setValue('')Alanla birlikte veri ayarlandıktan sonra hala 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>

Ayrıca bkz. Https://angular.io/docs/ts/latest/guide/reactive-forms.html ("form bayraklarını sıfırlama" bölümü)

> = RC.6

RC.6'da form modelinin güncellenmesi desteklenmelidir. Yeni bir form grubu oluşturma ve atamamyForm

[formGroup]="myForm"

ayrıca desteklenecektir ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

Yeni form modülünde (> = RC.5) NgFormbir reset()yöntem vardır ve ayrıca bir form resetolayını destekler . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Bu çalışacak:

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);
  }
}

Ayrıca bakınız

• 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

Angular2 RC5 itibariyle myFormGroup.reset()hile yapıyor gibi görünüyor.

Formunuzu gönderdikten sonra sıfırlamak için çağırmanız yeterlidir this.form.reset(). Aradığınızda reset():

1. Kontrolü ve çocuk kontrollerini bozulmamış olarak işaretleyin .
2. Kontrolü ve alt kontrolleri dokunulmamış olarak işaretleyin .
3. Denetim ve alt denetimlerin değerini özel değer veya boş olarak ayarlayın .
4. Etkilenen tarafların değerini / geçerliliğini / hatalarını güncelleyin .

Ayrıntılı bir yanıt için lütfen bu çekme talebini bulun . Bilginize, bu PR zaten 2.0.0 ile birleştirildi.

Umarım bu yardımcı olabilir ve Angular2 Formları ile ilgili başka sorularınız varsa bana bildirin.

clearForm();.Ts dosyanızda bir Çağrı Yapın

Form verilerinizi temizlemek için aşağıdaki örnek kod parçacığını deneyin.

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();
    }
}

İşte Angular 7.3'te bunu nasıl yapıyorum

// 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) ;
    });
}

Aramaya gerek yoktu form.clearValidators()

İşte bunu nasıl yapıyorum Açısal 8:

Formunuzun yerel referansını alın:

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

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

Ve formu sıfırlamanız gerektiğinde, resetFormyöntemi çağırın :

this.myForm.resetForm();

Sen gerekecektir FormsModuledan @angular/formsişe yaraması için. Bunu modül içe aktarmalarınıza eklediğinizden emin olun.

Açısal sürüm 4 için şunu kullanabilirsiniz:

this.heroForm.reset();

Ancak, aşağıdaki gibi bir başlangıç ​​değerine ihtiyacınız olabilir:

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

Nesne başvurunuzdaki boş sorunu çözmek önemlidir.

referans bağlantısı , "form bayraklarını sıfırla" araması yapın.

Bununla ilgili yeni bir tartışma var ( https://github.com/angular/angular/issues/4933 ). Şimdiye kadar, formun tamamını gönderdikten sonra yeniden oluşturmak gibi formu temizlemeye izin veren yalnızca bazı hack'ler var: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Başka bir çözüm buldum. Biraz karmaşık ama angular2 dünyasında yaygın olarak bulunur.

* NgIf yönergesi formu kaldırıp yeniden oluşturduğundan, forma bir * ngIf ekleyip onu bir çeşit formSuccessfullySentdeğişkene bağlayabiliriz . => Bu, formu yeniden oluşturacak ve bu nedenle giriş kontrol durumlarını sıfırlayacaktır.

Elbette model değişkenlerini de temizlemelisiniz. Form alanlarım için belirli bir model sınıfına sahip olmayı uygun buldum. Bu şekilde tüm alanları, bu model sınıfının yeni bir örneğini oluşturmak kadar basit bir şekilde sıfırlayabilirim. :)

Hm, şimdi (23 Ocak 2017 açısal 2.4.3 ile) Şöyle çalışmasını sağladım:

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

Aşağıdaki kod, Angular 4'te benim için çalışıyor

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 ();

Hepsi bu kadar yeter ... İstenilen çıktıyı alabilirsiniz

Formun tamamını gönderdikten sonra sıfırlamak için Angular'da reset () kullanabilirsiniz. Aşağıdaki örnek, Angular 8'de uygulanmıştır. Aşağıda, e-postayı girdi olarak aldığımız bir Abone Olma formu verilmiştir.

<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>

Resmi belgeye bakın: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}