2015-10-23 7 views
10

अल्फा: 44बटन मेरी पृष्ठ को पुनः लोड है, भले ही वह एक प्रस्तुत नहीं है

मैं angular2 में बटन के साथ वर्तमान में एक समस्या है ...

वे अजीब व्यवहार कि में मौजूद नहीं है के लिए लगता है angular1 और यहां तक ​​कि किसी भी शुद्ध html में यह अजीब व्यवहार

हर मैं अपने बटन पर क्लिक करें, पृष्ठ को पुनः लोड कर रहा है ऐसा नहीं करता है ... यह एक बटन .. प्रस्तुत नहीं कर रहा है तो यह पृष्ठ पुनः लोड नहीं करना चाहिए!

कि त्रुटि के एक बहुत ब्राउज़र को पुनः लोड करने के लिए और हम सांत्वना लॉग खो बनाने के एक और व्यवहार है कि angular2 में बहुत निराशा होती है ...

यहाँ कोड है

createPlayer() { 
    let p = new PlayerModel('s', 1); 
    console.log(p); 
} 

<form> 
    <div class="form-group"> 
     <label for="name" class="control-label"> 
      Name: 
     </label> 

     <input type="text" id="name" class="form-control"/> 
    </div> 

    <div class="form-group"> 
     <label for="score" class="control-label"> 
      Score: 
     </label> 

     <input type="number" id="score" class="form-control"/> 
    </div> 

    <div class="form-group"> 
     <button (click)="createPlayer()" class="btn btn-default"> 
      Create a Player 
     </button> 
    </div> 
</form> 

कोई त्रुटि है जब मैं पहले बयान में डिबगर लेकिन जब साथ प्रक्रिया होने बटन के अंत यह पृष्ठ पुनः लोड ...

+0

आप इसे एक डिफ़ॉल्ट कार्रवाई देने के लिए [ng-submit] (https://angular.io/docs/js/latest/api/core/NgForm-class.html) (पहले उदाहरण देखें) का भी उपयोग कर सकते हैं। –

उत्तर

15

निर्दिष्ट न किए जाने, फ़ॉर्म सबमिट ०१२३४७४९१२५ की डिफ़ॉल्ट व्यवहार हैएस (मुझे पता है, है ना?)। type="button" जोड़कर, या createPlayer में डिफ़ॉल्ट व्यवहार को रोककर, आप form युक्त कोई भी शामिल नहीं कर सकते हैं।

+0

मेरा बुरा .... मैं हमेशा टाइप = "बटन" रखना भूल जाता हूं ... यह पूरी तरह से काम करता है;) –

3

जो दूसरों दिलचस्पी हो सकती है के लिए: बनाने के इस तरह आपके प्रपत्र:

<form (ngSubmit)="onSubmit()" #feedback="ngForm"> 

फिर अपने घटक में कोई ऑनसबमिट() फ़ंक्शन पैदा करते हैं।

उदाहरण के लिए angular.io पर जाएं और बाएं मेनू पर मूल बातें/फॉर्म पर जाएं, नीचे स्क्रॉल करें और "लाइव डेमो" लिंक पर क्लिक करें।

संबंधित मुद्दे