Πρόβλημα με angular.js 4 και HTML (αρχάριος)

[sma0900029]

Παιδιά έχω το εξής θέμα ( μιας και τώρα τα μαθαίνω). Θέλω να περάσω τιμές από HTML στην angular ( το αντίστροφο το έχω καταφέρει ευτυχώς ). Λοιπόν αυτά που έχω είναι: 

HTML:

 <form onsubmit="myFunction()">
  First name:<br>
  <input type="text" name="firstname" value="{{firstname}}" id='a'><br>
  Last name:<br>
  <input type="text" name="lastname" id='b'><br>
  <input type="submit" value="Submit">
</form>

angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app Denniisss';
  firstname = 'dennis';
}
function myFunction() {
    var a = document.getElementById("a");
    var b = document.getElementById("b");
    alert("this it works"+a+"  "+ ;
}
 

Διάβασα οτι αφού συμπληρώσω τη φόρμα πατώντας το submit θα τρέξει το script-ακι. Αλλά δεν εκτελείται η συνάρτηση myFunction() . Όσα είναι με πορτοκαλί χρώμα εκτελούνται κανονικά. Μπορείτε να μου πείτε τι κάνω λάθος  :mad: ;;;;; Ευχαριστώ εκ των προτέρων.

[Click4Money]

 onsubmit="myFunction()" πρεπει να γίνει (click)="myFunction()"

[Predatorkill]

Κανε edit το ποστ και βαλε ολο το κωδικα σε [ code=auto:0]bla bla [/ code] (βγαλε το κενο απο το code)

 

Ειναι εναντια στη φυση του framework να παιζεις κατευθειαν με το document, οτι θες να κανεις στο document το τραβας με @ViewChild (ή με Renderer 2) και μεταβλητες, δες εδω: https://stackoverflow.com/questions/35801420/angular2typescript-how-to-manipulate-dom-element

 

Ξεκινα αμεσα να μαθαινεις model driven forms, οσο ευκολη φαινεται η template driven form τοσο πιο πολυ σου δενει τα χερια.

 

Εχεις μπερδευτει αρκετα, δεν υπαρχει onsubmit αλλα:

<div>
    <h1>Add user</h1>
    <form #f="ngForm" (ngSubmit)="save(f.value, f.valid)" novalidate>
        <!-- we will place our fields here -->
        <button type="submit">Submit</button>
    </form>
</div>

Δες εδω: https://scotch.io/tutorials/using-angular-2s-template-driven-forms (ειναι template driven tutorial αλλα οπως σου ειπα γυρνα το σε model driven)

[sma0900029]

Φίλε predatorkill ευχαριστώ πολύ για την απάντηση. Δεν έχω ασχοληθεί με JavaScript καθόλου όποτε θα δεις πολλά περίεργα δυστυχώς. Είναι από το κινητό Μόλις μπορέσω θα το κάνω edit και θα δω τα λινκ που μου έστειλες και θα σου πω τι κατάφερα. Ευχαριστώ πολύ και πάλι !!!!

[Predatorkill]

Αν δεν εχεις ασχοληθει με javascript καθολου θα σε μπερδεψει πολυ η Angular. Η σωστη σειρα εκμαθησης ειναι Javascript(ES5) -> ES6 -> Typescript-> Angular.

 

Ολη η Angular ειναι γραμμενη σε Typescript, δεν γινεται να προγραμματισεις με vanilla Javascript (εκτος και αν θες να καψεις τον εγκεφαλο σου).

 

Το ξεχνας το DOM εκτος απο μερικες περιπτωσεις που κρινεται αναγκαιο. Ολα γινονται με τους κανονες της Angular.

 

Edit: δεν ειναι angular.js 4 αλλα σκετο angular πια.

Επεξ/σία 22 Αυγούστου 2017 από Predatorkill

[sma0900029]

Έχω δει κάποια tutorial αλλά είναι τόσα πολλά τα κάνω επί τόπου και δεν μου μένει τίποτα. Έχω δει πάρα πολλά και είναι μπάχαλο. Ξεκίνησα σήμερα να κάνω κάτι σιγα σιγα μόνος μου και απλά κολλάω στα παντα. ΒΡΊΣΚΩ απαντήσεις σε κάποια ερωτήματα και αμέσως γεννιούνται καινούργια. Θα δω ότι μου έστειλες και λογικά αύριο το μεσημέρι αν όλα πάνε καλά θα σου πω αν τα κατάφερα. Ευχαριστώ πολύ για τη βοήθεια σου γιατί κοιτάω πολλά και βρίσκω ένα πράγμα με 10 διαφορετικούς τρόπους και απλά εκεί τα κάνω..... σαλάτα χαχαχαχχα

[Predatorkill]

Έχω δει κάποια tutorial αλλά είναι τόσα πολλά τα κάνω επί τόπου και δεν μου μένει τίποτα. Έχω δει πάρα πολλά και είναι μπάχαλο. Ξεκίνησα σήμερα να κάνω κάτι σιγα σιγα μόνος μου και απλά κολλάω στα παντα. ΒΡΊΣΚΩ απαντήσεις σε κάποια ερωτήματα και αμέσως γεννιούνται καινούργια. Θα δω ότι μου έστειλες και λογικά αύριο το μεσημέρι αν όλα πάνε καλά θα σου πω αν τα κατάφερα. Ευχαριστώ πολύ για τη βοήθεια σου γιατί κοιτάω πολλά και βρίσκω ένα πράγμα με 10 διαφορετικούς τρόπους και απλά εκεί τα κάνω..... σαλάτα χαχαχαχχα

Ξεκινα να μαθαινεις με τη σειρα που σου εγραψα πιο πανω. Μη πηδας απο το ενα στο αλλο, αυτο κανεις και χανεσαι. Την Angular θα την μαθεις τελευταια, μη βιαζεσαι αλλιως δεν θα καταλαβαινεις τιποτα. Θα νομιζεις οτι καταλαβαινεις τι λενε στα tutorial αλλα επειδη δεν εχεις βασεις θα τα ξεχνας πολυ γρηγορα.

 

Αν εχεις σκοπο να δαπανησεις χρηματα για tutorials πες μου να ποσταρω μερικα, μη κατσω να τα βρω αδικα.

 

Τα επι πληρωμη συνηθως ειναι πιο δομημενα απο τα δωρεαν, περαν του οτι θα κατσεις να το δεις επειδη το πληρωσες και δεν θα το παρατησεις.

[sma0900029]

Καλημέρα φίλε οχι Όχι μην ψάξεις άδικα χω βρει και εγώ διάφορα επί πληρωμή απλά περιμένω κάποια σεμινάρια να βγουν να πάω εκεί πιστεύω θα είναι καλύτερα αλλά θέλω να τα μάθω από τώρα να βγάλω κάποια δουλειά μέχρι να περιμένω τα σεμινάρια.Ηδη έχω στρωθεί και διαβαζω..Αν χρειαστώ κάτι θα σου στείλω ευχαριστώ πολύ και παλιιιι

 onsubmit="myFunction()" πρεπει να γίνει (click)="myFunction()"

Καλα από το κινητό δεν φαινότανε καν το σχόλιο. Συγγνωμη που δεν απάντησα αλλά δεν το έβλεπα, τωρα το είδα από τον υπολογιστή. Θα το δοκιμάσω και αυτό μία, όσο κατεβάζω tutorials.Ευχαριστώ πολύ και συγγνώμη που αργησα τόσο να απαντησω.

[skiabox]

To dom γιατί να το ξεχάσει;

Από εδώ https://developer.mozilla.org/en-US/docs/Web/API θα δει τα types που χρειάζονται για να κάνει declarations σε typescript.

[Predatorkill]

To dom γιατί να το ξεχάσει;

Από εδώ https://developer.mozilla.org/en-US/docs/Web/API θα δει τα types που χρειάζονται για να κάνει declarations σε typescript.

https://hackernoon.com/top-common-mistakes-of-angular-developers-2a36524f2c21

[skiabox]

Α λες να μην το πειράξει.

Είχα στο μυαλό μου να πάρει κάποια events για παράδειγμα από αυτό.

[sma0900029]

Έψαξα γενικά και αλλού πέρα από αυτά που μου είπαν και χθες τα παιδιά και βρήκα ένα site ( που δεν θυμάμαι ποιο είναι ια το κάνω ποστ αύριο που θα πάω στο σπίτι) και ήταν ακριβώς αυτό που έψαχνα και δούλεψε τέλεια.Δεννθυμαμαι πως ακριβώς το έκανε γιατί απλά είδα ότι δουλεύει και μετα έπρεπε να φύγω αλλά δούλεψε. Ήταν ότι ήθελα έστελνε τιμή από το html αρχείο στο typescript. Βέβαια μέσα όσα διάβασα από όσα μου στείλατε έκανα και τη σωστή αναζήτηση γιατί καμία φορά δεν ξέρω(-ουμε) πως να αναζητήσουμε αυτά που θέλουμε επειδή δεν ξέρουμε την ορολογία. Επειδή σας κούρασα κιόλας με το μεγάλο ποστ να σας ευχαριστήσω ακόμα μια φορά για τη πολύτιμη βοήθεια και σίγουρα θα ανεβάσω ξανά κάποια απορία αφού πρώτα αγανακτησω χαχαχαχα Ευχαριστώ πολύ και παλι

[exarhis]

Παιδιά έχω το εξής θέμα ( μιας και τώρα τα μαθαίνω). Θέλω να περάσω τιμές από HTML στην angular ( το αντίστροφο το έχω καταφέρει ευτυχώς ). Λοιπόν αυτά που έχω είναι: 

HTML:

 <form onsubmit="myFunction()">

  First name:<br>

  <input type="text" name="firstname" value="{{firstname}}" id='a'><br>

  Last name:<br>

  <input type="text" name="lastname" id='b'><br>

  <input type="submit" value="Submit">

</form>

angular:

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app Denniisss';

  firstname = 'dennis';

}

function myFunction() {

    var a = document.getElementById("a");

    var b = document.getElementById("b");

    alert("this it works"+a+"  "+ ;

}

 

Διάβασα οτι αφού συμπληρώσω τη φόρμα πατώντας το submit θα τρέξει το script-ακι. Αλλά δεν εκτελείται η συνάρτηση myFunction() . Όσα είναι με πορτοκαλί χρώμα εκτελούνται κανονικά. Μπορείτε να μου πείτε τι κάνω λάθος  :mad: ;;;;; Ευχαριστώ εκ των προτέρων.

Μπορείς να το κάνεις με απλό JS Στο Submit button μπορείς να βάλεις onclick="myFunction()"

[Predatorkill]

Μπορείς να το κάνεις με απλό JS Στο Submit button μπορείς να βάλεις onclick="myFunction()"

Μα η angular σου παρεχει τροπο να το κανεις οπως θελει αυτη, γιατι να παει σε απλο js;

 

Αμα θελει να κανει validation τι θα κανει; Θα γραψει κωδικα ενω στον δινει η angular με μια μονο λεξη;

 

Οι φορμες στην angular ειναι μια κατηγορια μονες τους, αμα γουσταρεις τρελιτσες παιξε με js