सवाल ngSubmit पृष्ठ को कोणीय 2 रूप में रीफ्रेश करता है


मैं एक फॉर्म बनाने के लिए Angular2 टेम्पलेट का उपयोग कर रहा हूँ।

जब मैं बटन पर क्लिक करता हूं, पेज रीफ्रेश होते हैं।

मेरी मान्यताओं ठीक काम कर रहे हैं।

जब उपयोगकर्ता बटन पर क्लिक करता है तो मैं पेज रीफ्रेश कैसे रोक सकता हूं?

निम्नलिखित HTML है जिसका उपयोग मैं कर रहा हूं: -

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Add Employee</h3>
        {{model | json}}
        {{EName.errors | json}}
    </div>
    <div class="panel-body">  
        <form (ngSubmit)="onSubmit(empForm)" #empForm="ngForm" autocomplete="off" novalidate>

        <div class="form-group">
            <label for="EmployeeName">Employee Name</label>
            <input type="text" class="form-control" id="EmployeeName" placeholder="Employee Name" required [(ngModel)]="model.EName" name="EName" #EName="ngModel" ngControl="Ename" #EName="EName" >
            <div *ngIf="EName.touched && EName.errors" >
                <div *ngIf="EName.errors.required"  class="alert alert-danger">
                    Employee Name is required
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="Age">Age</label>
            <input type="text" class="form-control" id="Age" name="Age" placeholder="Age" [(ngModel)]="model.Age" ngControl="Age">
        </div>
        <div class="form-group">            
            <label for="Sex">Sex</label>
            <div class="d-block">
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Male" value="0" (click)="model.Sex=$event.target.value"> Male
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Female" value="1" (click)="model.Sex=$event.target.value"> Female
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="DOJ">Date of Joining</label>
            <datepicker [(ngModel)]="model.DOJ" name="DOJ"></datepicker>
        </div>

        <div class="form-group">
            <label for="Salary">Salary</label>
            <input type="text" class="form-control" id="Salary" placeholder="Salary" [(ngModel)]="model.Salary" name="Salary">
        </div>

        <div class="form-group">
            <label for="Designation">Designation</label>
            <select id="Designation" name="designation" class="form-control" required [(ngModel)]="model.Designation" name="designation" #desig="ngForm" ngControl="Designation">
                <option value="" selected>-- Select  --</option>
                <option *ngFor="let designation of designations" value="{{ designation.id }}"> 
                    {{designation.name}} 
                </option>
            </select>
            <div [hidden]="desig.valid || desig.pristine" class="alert alert-danger">
                Please select a proper designation.
            </div>
        </div>
        <button type="submit" class="btn btn-default" [disabled] ="!empForm.form.valid">Submit</button>
        </form>
    </div>
</div>

44
2017-08-29 09:57


मूल




जवाब:


यह ताज़ा करता है क्योंकि इसमें कोई त्रुटि है onSubmit हैंडलर .. उपयोग event.PreventDefault(); में onSubmit :

 <form (ngSubmit)="onSubmit(empForm, $event)" ... >


public onSubmit(empForm: any, event: Event) {
  event.preventDefault();
  .... rest of your code
}

आप त्रुटि को डीबग करने के लिए बस कंसोल आउटपुट की जांच कर सकते हैं ... चिह्नित करने के लिए सुनिश्चित करें preserve log विकल्प

preserve log checked in devtools


63
2017-10-15 05:53



आपने मेरा दिन बचाया मैंने अभी बहुत कुछ सीखा है :) जिस तरीके से आप समझते हैं कि त्रुटि कैसे पता लगाना है! धन्यवाद!!! - john Smith
यह बग दुर्लभ परिस्थितियों में होता है, ऐसा लगता है। निश्चित रूप से नहीं यदि इनपुट फ़ील्ड डिफ़ॉल्ट रूप से खाली हैं। - Blauhirn
यह समाधान, जहां तक ​​मैं कह सकता हूं, एओटी कंपाइलर के साथ संगत नहीं है। मैंने हर तरह से कोशिश की जिस तरह से मैं सोच सकता था, लेकिन हमेशा प्राप्त करता था Supplied parameters do not match any signature of call target.। - Dustin Cleveland
भले ही मैंने कार्यान्वित किया हो event.preventDefault() onSubmit () फ़ंक्शन पेज रीफ्रेश / पोस्टबैक का कारण बनता है। कोई विचार क्यों? - MarmiK


सुनिश्चित करें कि आप आयात करते हैं FormsModule से @ कोणीय / रूपों आपके घटक वाले मॉड्यूल में क्योंकि इसके बिना सबमिट पर आपका फॉर्म पृष्ठ को रीफ्रेश करना जारी रखेगा और कंसोल पर कुछ भी लॉग इन किए बिना चुपचाप विफल रहा होगा।

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';

/*make sure you import it here*/
import { FormsModule }        from '@angular/forms';

 @NgModule({
  /*and add it to the imports array here*/
  imports:      [ FormsModule,  CommonModule],
  declarations: [ YourFormComponent ],
  exports:      [],
  providers:    [],
})

export class FeatureModule{ }

40
2018-03-10 16:18





इसके बजाए प्रयोग करें:

<button type="button"

पुनः लोड ब्राउज़र के डिफ़ॉल्ट सबमिट व्यवहार के कारण होता है।


12
2017-08-29 10:12



तुम सही हो। मैं बटन प्रकार को बटन में बदल सकता हूं, लेकिन बटन बटन सबमिट के साथ हम इसे कैसे कर सकते हैं। वास्तव में मैं कोणीय 2 सीख रहा हूँ। :) - Kunal
@ सरोज ऑनक्लिक = "झूठी वापसी;" - asdf_enel_hak
@asdf_enel_hak (click)="false" वही करेंगे लेकिन मुझे नहीं पता कि कोणीय क्या हैं ngSubmit तब कहा जाता है। मुझे उम्मीद है कि इसकी आवश्यकता होगी (click)="form.submit();false" या कुछ लेकिन type="button" रास्ता आसान है। - Günter Zöchbauer
मैंने इंटरनेट पर कई उदाहरण देखे (github.com/DeborahK/ngconf2016/blob/master/MovieHunter/app/...)। हमें झूठी उपयोग करने की आवश्यकता नहीं है और न ही हमें कुछ विशेष करने की आवश्यकता है। - Kunal
कुछ भी तो नहीं। मैं सीखना चाहता हूं कि ngSubmit का उपयोग कैसे करें और मेरा कोड ngSubmit reloading पूर्ण पृष्ठ के साथ क्यों - Kunal