कोणीय 2 में जमा करने के बाद फॉर्म को कैसे साफ़ करें?

Question

मेरे पास टेम्पलेट के साथ कुछ सरल कोणीय 2 घटक हैं। सबमिट करने के बाद फ़ॉर्म और सभी फ़ील्ड कैसे साफ़ करें? मैं पेज पुनः लोड नहीं कर सकता। date.setValue('')फ़ील्ड के साथ सेट डेटा स्टिल होने के बाद 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
    }
}

लोड हो रहा है-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>

Answer 1

Https://angular.io/docs/ts/latest/guide/reactive-forms.html (अनुभाग "फ़ॉर्म फ़्लैग रीसेट करें") भी देखें

> = RC.6

RC.6 में इसे फॉर्म मॉडल को अपडेट करने के लिए समर्थित होना चाहिए। एक नया फ़ॉर्म समूह बनाना और उसे असाइन करनाmyForm

[formGroup]="myForm"

भी समर्थित किया जाएगा ( https://github.com/angular/angular/pull/11051#issuecomment-243434654 )

> = RC.5

form.reset();

नए रूपों में मॉड्यूल (> = RC.5) NgFormमें एक reset()विधि है और एक फॉर्म resetईवेंट का भी समर्थन करता है । https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

यह काम करेगा:

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

यह सभी देखें

• 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

Comments

@ masel.popowo हाँ, यदि आप चाहते हैं pristine, ..., तो फ़ॉर्म का पुनर्निर्माण वर्तमान में एकमात्र विकल्प है।

— गुंटर ज़ोचबॉयर

@ günter-zöchbauer आप फॉर्म का पुनर्निर्माण कैसे करते हैं?

— सिमोनहॉवर्स

मैंने खुद इसे अभी तक आज़माया नहीं है, लेकिन मुझे लगता है कि आप बस नियंत्रण समूह छोड़ देते हैं और एक नया निर्माण करते हैं। कोड को किसी फ़ंक्शन में ले जाएं ताकि यदि आवश्यक हो तो आप इसे बार-बार कॉल कर सकें।

— गुंटर ज़ोचबॉयर

समुच्चय के लिए +1 ()। वैसे मैं यहाँ एक गलती का दस्तावेज बनाता हूँ, एक गलती जो मैंने किसी और से की थी, उसी तरह से: यदि आप एक प्लेसहोल्डर का उपयोग करते हैं, जैसे 'foo' नियंत्रण को कॉल नहीं करता है।

— माइक आरग्यिउ

मैं setValue()नियंत्रण पर एक विधि के बारे में नहीं जानता । केवल updateValue() github.com/angular/angular/blob/master/modules/angular2/src/…

— Günter Zöchbauer

Answer 2

Angular2 RC5 के रूप में, myFormGroup.reset()चाल करने के लिए लगता है।

Comments

यह कोणीय 4 में काम करता है, इसका उपयोग फॉर्म सत्यापन को रीसेट करने के लिए किया जाता है

— ग्रिम

Answer 3

सबमिट करने के बाद अपने फॉर्म को रीसेट करने के लिए, आप बस इनवॉइस कर सकते हैं this.form.reset()। reset()इसे कॉल करके :

1. नियंत्रण और बच्चे के नियंत्रण को प्राचीन के रूप में चिह्नित करें ।
2. नियंत्रण और बच्चे के नियंत्रण को अछूते के रूप में चिह्नित करें ।
3. कस्टम मूल्य और नल के लिए नियंत्रण और बच्चे के नियंत्रण का मूल्य निर्धारित करें ।
4. प्रभावित दलों के अद्यतन मूल्य / वैधता / त्रुटियां ।

कृपया विस्तृत उत्तर के लिए इस अनुरोध को पाएं। FYI करें, इस PR को पहले ही 2.0.0 में विलय कर दिया गया है।

उम्मीद है कि यह मददगार हो सकता है और मुझे बताएं कि क्या आपके पास Angular2 फॉर्म के संबंध में कोई अन्य प्रश्न हैं।

Comments

अगर मैं रीसेट का उपयोग करता हूं तो सत्यापन लागू नहीं होते हैं। मैं दोनों काम कैसे कर सकता हूं?

— निशा

Answer 4

clearForm();अपने .ts फ़ाइल में कॉल करें

अपना फ़ॉर्म डेटा साफ़ करने के लिए उदाहरण कोड स्निपेट के नीचे की तरह आज़माएँ।

clearForm() {

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

Answer 5

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

Comments

@ यह तब ठीक होता है जब हमें सभी क्षेत्रों को साफ़ करना होता है। लेकिन हम केवल कुछ क्षेत्रों को खाली करने के लिए इसे कैसे लागू कर सकते हैं?

— अखिलेश पोथुरी

Answer 6

यहां बताया गया है कि मैं इसे 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) ;
    });
}

बुलाने की जरूरत नहीं थी form.clearValidators()

Comments

फॉर्मब्यूलर के साथ बनाए गए फॉर्म को क्लियर करने के लिए यह सबसे अच्छा (और केवल मेरे लिए काम कर रहा है) समाधान है, जिसके पास वेरिएटर्स के साथ नियंत्रण है।

— मिमी

Answer 7

यहां बताया गया है कि मैं इसे कोणीय 8 कैसे करता हूं:

अपने फ़ॉर्म का स्थानीय संदर्भ प्राप्त करें:

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

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

और जब भी आपको फॉर्म को रीसेट करने की आवश्यकता हो, कॉल resetFormविधि:

this.myForm.resetForm();

---

आप की आवश्यकता होगी FormsModuleसे @angular/formsयह काम करने के लिए। इसे अपने मॉड्यूल आयात में जोड़ना सुनिश्चित करें।

Comments

@ViewChildकोणीय 8 में 2 तर्क चाहिए। @ViewChild('myForm', {static: false}) myForm: NgForm;

— तंजील

Answer 8

कोणीय संस्करण 4 में, आप इसका उपयोग कर सकते हैं:

this.heroForm.reset();

लेकिन, आपको एक प्रारंभिक मूल्य की आवश्यकता हो सकती है जैसे:

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

अपने ऑब्जेक्ट संदर्भ में अशक्त समस्या को हल करना महत्वपूर्ण है।

संदर्भ लिंक , "फ़ॉर्म फ़्लैग रीसेट करें" के लिए खोजें।

Comments

धन्यवाद, यह मेरे लिए काम कर रहा है। यह वही चीज है जो मैं चाहता हूं।

— धवल मिस्त्री

Answer 9

इस बारे में एक नई चर्चा है ( https://github.com/angular/angular/issues/4933 )। अब तक केवल कुछ हैक हैं जो फ़ॉर्म को साफ़ करने की अनुमति देते हैं, जैसे सबमिट करने के बाद पूरे फॉर्म को फिर से बनाना: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Comments

और अंत में हमारे पास इसे सही तरीके से करने की एक विधि है: github.com/angular/angular/pull/9974

— wawka

Answer 10

मुझे एक और उपाय मिला। यह थोड़ा हैकेसी है लेकिन इसकी एंगुलर 2 दुनिया में व्यापक रूप से उपलब्ध है।

चूँकि * ngIf निर्देश प्रपत्र को निकालता है और इसे पुन: बनाता है, कोई व्यक्ति प्रपत्र में * ngIf जोड़ सकता है और इसे किसी प्रकार के formSuccessfullySentचर में बाँध सकता है । => यह फॉर्म को फिर से बनाएगा और इसलिए इनपुट कंट्रोल स्टेटस को रीसेट करेगा।

बेशक, आपको मॉडल चर भी साफ़ करना होगा। मुझे अपने फॉर्म फ़ील्ड के लिए एक विशिष्ट मॉडल वर्ग रखना सुविधाजनक लगा। इस तरह से मैं इस मॉडल वर्ग का एक नया उदाहरण बनाने के लिए सभी क्षेत्रों को सरल बना सकता हूँ। :)

Comments

जोड़: मैं AngularDart का उपयोग कर रहा हूं, जिसमें अभी तक ऐसा कोई रीसेट-विधि नहीं है। या कम से कम मैंने अभी इसकी खोज नहीं की। : डी

— बेंजामिन जेसुटर

RC.6 के साथ सिर्फ फॉर्म मॉडल को फिर से इनिशियलाइज़ करना होगा। यदि आप प्रपत्र मॉडल को किसी विधि में बनाना चाहते हैं, तो इस विधि को कॉल करने से प्रपत्र रीसेट हो जाएगा।

— गुंटर Zöchbauer

@ GünterZöchbauer ओह महान! मैं भी डार्ट के लिए Angular2 में इस सुविधा के लिए इंतजार नहीं कर सकता! :) क्योंकि एक समस्या के रूप में मेरा दृष्टिकोण: मेरे पास मेरे रूप में सभी इनपुट तत्वों की एक सूची है। मैं इन के माध्यम से डार्ट देशी पाने querySelectorAllमें ngAfterViewInit। मैं इस सूची का उपयोग प्रपत्र सबमिट करने के बजाय, keydown.enter पर अगले इनपुट तत्व को केंद्रित करने के लिए करता हूं। प्रपत्र को पुन: व्यवस्थित करने के लिए ngIf का उपयोग करते समय यह सूची टूट जाती है। :(

— बेंजामिन जेसुटर

ठीक है, मैंने समस्या को ठीक कर दिया। जब मैं अपना फॉर्म मॉडल रीसेट करता हूं तो मैं InputElement उदाहरणों को फिर से क्वेरी कर सकता हूं।

— बेंजामिन जेसुटर 21

Answer 11

एचएम, अब (23 जनवरी 2017 को कोणीय 2.4.3 के साथ) मैंने इसे इस तरह से काम किया:

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

Answer 12

नीचे कोड मेरे लिए कोणीय 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()
 }

}

Answer 13

this.myForm.reset ();

यह सब पर्याप्त है ... आप वांछित आउटपुट प्राप्त कर सकते हैं

Comments

अधिक विवरण जोड़ें कि कोड की यह लाइन समस्या का समाधान कैसे करती है

— Sfili_81 12

Answer 14

सबमिट करने पर पूरा फ़ॉर्म रीसेट करने के लिए, आप कोणीय में रीसेट () का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण को कोणीय 8 में लागू किया गया है। नीचे एक सदस्यता फ़ॉर्म है जहां हम एक इनपुट के रूप में ईमेल ले रहे हैं।

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

आधिकारिक दस्तावेज़ देखें: https://angular.io/guide/forms#show-and-hide-validation-error-messages ।

Answer 15

resetForm(){
    ObjectName = {};
}

Comments

यद्यपि यह कोड प्रश्न का उत्तर दे सकता है, आपको यह बताते हुए एक स्पष्टीकरण जोड़ना चाहिए कि यह समस्या का हल क्यों / कैसे करता है।

— BDL

यह 'छुआ हुआ', 'प्राचीन', आदि ... वर्गों को उनके मूल मूल्यों पर वापस सेट नहीं करता है।

— Pac0

@ शिवेंद्र यह आपकी समस्या के लिए विशेष रूप से काम कर सकता है, लेकिन यह सामान्य नहीं है। आप अपना objectखाली कर रहे हैं और नहीं form।

— तंजील