Comment soumettre le formulaire au serveur en Angular2?

Maintenant la présentation a été pris par angular2 même avec action= en <form>.

le lien de démonstration: http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=preview 

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <form action="https://www.google.com" target="_blank" method="POST">
        <input name="q" value="test">
        <button type="submit">Search</button>
      </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}
  • L'affichage d'un formulaire directement provoque un rechargement de la page, ce n'est généralement pas ce que vous voulez dans Angulaire de l'application (SPA). Saisir les données de formulaire et d'envoyer une requête HTTP à partir de votre code sur le serveur à la place.
  • Avec target="_blank" le poste devrait être devrions-nous vers une nouvelle page. Et l'action point à un autre domaine, de sorte xhr n'est pas une option.
  • Je vois. Vous avez raison.
InformationsquelleAutor Tim Green | 2016-01-17
  1. 68

    Vous devriez tirer parti de la NgSubmit directive, comme décrit ci-dessous:

    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  (...)
  <input type="text" [(ngModel)]="data.name"/>
  (...)
  <button type="submit">Send</button>
</form>

    Dans ce cas, lorsque vous cliquez sur le bouton envoyer, le onSubmit méthode de la composante sera appelée, et vous serez en mesure d'envoyer manuellement des données au serveur en utilisant le HTTP classe sur Angular2:

    @Component({
})
export class MyComponent {
  constructor(private http:Http) {
    this.data = {
      name: 'some name'
      (...)
    };
  }

  onSubmit() {
    this.http.post('http://someurl', JSON.stringify(this.data))
        .subscribe(...);
  }
}

    De cette façon, vous pouvez rester dans la même page.

    Modifier

    À la suite de votre commentaire, vous devez désactiver le comportement de la NgForm directive qui attrape le submit événement et l'empêche d'être propagées. Voir cette ligne: https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141.

    Pour le faire il suffit d'ajouter le ngNoForm attribut à votre formulaire:

    <form ngNoForm action="https://www.google.com" target="_blank" method="POST">
  <input name="q" value="test">
  <button type="submit">Search</button>
</form>

    Dans ce cas, une nouvelle fenêtre sera ouverte pour votre formulaire de soumission.

    Espère que cela vous aide,
    Thierry

    • Comme je l'ai mentionné dans le commentaire ci-dessus. ngSubmit n'est pas ce que je veux. Je veux juste ouvrir une nouvelle fenêtre avec les données post.
    • Désolé, je ne comprends pas votre problème... Vous devriez utiliser le ngNoForm attribut pour votre formulaire. J'ai mis à jour ma réponse 😉
    • Bravo! J'ai été en cours d'exécution pour la même question, d'où mon formulaire en l'enveloppant d'un bouton "soumettre" pour vous déconnecter de mon application) n'était pas en cours d'exécution. J'ai passé une heure à regarder mes marques avant de il a cliqué sur qu'il pourrait être un Angular2 chose en particulier. Tombé dans la ngNoForm attribut, et boom! Succès! Merci une tonne!
    • Vous devriez faire quelques ng2 tutoriels 🙂
    • ngNoForm, ce qu'une interface intuitive et logique d'annotation à ajouter. Mais cela vient de résoudre un problème que j'ai cogné la tête en essayant de se déplacer pour une semaine.
    • La soumission de formulaire de cette façon donne l'erreur suivante. l'Accès à XMLHttpRequest à 'buyerzone.com/retail/atm-machines/rfqhp/...' d'origine 'localhost:4200 "a été bloqué par la SCRO politique: Pas de "Access-Control-Allow-Origin' en-tête est présent sur la ressource demandée.

    InformationsquelleAutor Thierry Templier
  2. 12

    Essayez ceci:

    <form action="https://www.google.com" target="_blank" method="POST" #form>
    <input name="q" value="test">
    <button type="submit" (click)="form.submit()">Search</button>
</form>

    http://plnkr.co/edit/Qjh8ooPpkfVgEe0dIv4q?p=preview

    • Hey cela a fonctionné pour moi. Vous pouvez peut-être ajouter une explication, pourquoi? Je viens d'ajouter la variable de modèle et l'événement click
    • C'est juste la façon dont les formulaires html de travail, lorsque vous les présenter ils vont envoyer une requête post ou get tel que défini dans l'attribut method de l'url définie dans l'attribut action
    InformationsquelleAutor Langley
  3. 2

    Hey, si quelqu'un l'a jamais certains ennuyeux problème dans Firefox lors de la publication d'une forme à une nouvelle url provoque un rafraichissement de la page et de ne pas suivre à travers de la page, ajouter target="_parent" et résoudre le problème.

    InformationsquelleAutor rtn
  4. 2

    Vous pouvez également soumettre le formulaire de cette façon.

    Voici le balisage HTML.

    <form (ngSubmit)="onSubmit($event)" #f="ngForm">
    (...)
    <input type="text" [(ngModel)]="data.name"/>
    (...)
    <button type="submit">Send</button>
    </form>

    Et voici le code dans votre .fichier ts.

    onSubmit(e) {
    e.target.submit();
    }

    InformationsquelleAutor Musaddiq Khan