web-dev-qa-db-de.com

Angular4 - Post Form-Daten an die API

Wie ist es möglich, Formulardaten an eine externe Rest-API zu senden?

Im Moment habe ich eine HTML-Form:

<form [formGroup] = "form" (ngSubmit) = "onSubmit(form.value)">
  <input name="name" formControlName="name">
  <input name="first_name" formControlName="first_name">
  <input name="last_name" formControlName="last_name">
  <button type="submit">Save</button>
 </form>

und dann habe ich die Funktion, die das Submit in meiner komponente.ts-Datei behandelt:

  onSubmit = function (user) {
    console.log(user);
    //this.http.post('http://xxx/externalapi/add', user);
  }

Aber wie ist es möglich, die Formulardaten auf meinem externen API zu veröffentlichen? Und was ist der Standard für das Senden von Formulardaten mit eckig? Ist es nur eine einfache Post-Anfrage mit Formulardaten wie queryParams oder ist es Standard, diese in JSON zu konvertieren. Ich kann die API so anpassen, dass sie mit den gesendeten Daten umgeht, sodass dies kein Problem darstellt.

5
user1985273

Ok, es stellt sich also heraus, dass ich .subscribe () hinzufügen muss, um etwas zu posten. Wenn ich "user" aus einem bestimmten Grund direkt in die post-Anfrage stelle, wird eine Anfrage mit der Methode "OPTIONS" ohne eine Option gesendet Karosserie. Also muss ich selbst einen queryParams-String erstellen. Wenn jemand dies erklären oder einen besseren Weg zeigen kann, würde ich es schätzen. Ansonsten funktioniert das momentan:

 onSubmit = function (user) {
    console.log(user);

    var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&name=" + user.name;
    this.http.post("http://www.testtttt.com", body).subscribe((data) => {});

  }

Bearbeiten: Eine andere und wahrscheinlich sogar bessere Lösung ist die Verwendung von JSON.stringify (Benutzer) anstelle von body. Aber abonnieren () wird immer noch benötigt.

10
user1985273

Für die Erstellung als generische Post & Get Methode in Winkel 2/4 mit Formulardaten

import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable';

constructor(private _http: Http) { }

get(url: string): Observable < any > {
    return this._http.get(url)
             .map((response: Response) => <any>response.json()); 
}

post(url: string, model: any): Observable <any> {
    let formData: FormData = new FormData(); 
    formData.append('id', model.id); 
    formData.append('applicationName', model.applicationName); 
    return this._http.post(url, formData)
        .map((response: Response) => {
            return response;
        }).catch(this.handleError); 
}
12
GirishBabuC

Wie wäre es mit TypeScript, um Ihnen das Leben zu erleichtern?

Das HTML hat ngModel bidirektionale Bindung. Ich habe geändert, um die Form personForm umzubenennen. Sie können eine Bestätigung hinzufügen, aber überspringen.

 <form #personForm="ngForm"(ngSubmit)="onSubmit(personForm.value)">     
  <input name="firstName" [(ngModel)]="firstName">
  <input name="lastName" [(ngModel)]="lastName">
  <button type="submit">Save</button>
 </form>

Auf der Komponente können Sie eine Schnittstelle Person verwenden, die Sie in einem Modellordner definieren können. Der Inhalt sieht so aus.

export interface Person {
  id:number;
  firstName: string;
  lastName: string;
}

Und in der Submit-Methode können Sie es automatisch wie unten zuordnen.

onSubmit(person: Person){
  http.post('your_url', person).subscribe(status=> console.log(JSON.stringify(status)));
}

Sehen Sie, wie einfach es ist, Sicherheit zu geben? Sie können auch prüfen, ob die ID gefüllt ist, und entweder eine 'PUT'- oder eine' DELETE'-Anforderung erstellen, je nachdem, ob Sie die Person aktualisieren oder löschen möchten. 

3
Mukus

Lassen Sie mich zu der akzeptierten Antwort beitragen, da ich nicht genug Reputation habe, um Kommentare abzugeben. Anstatt alle Formulareingaben einzeln in ein Modell aufzunehmen, können Sie Folgendes tun

var model = this.forContollname.value

Dann könnten Sie folgendes anrufen

 var values = JSON.stringify(model)

Die Werte können dann an Ihre Post-Methode übergeben werden. Ich hoffe, dies vereinfacht den Prozess für jemanden mit einer großen Form.

1
israel

um Daten an die restliche API zu senden, benötigen Sie die Datenvariable spacify

onSubmit = function (user) {
console.log(user.value);

var data= {
"name": user.value.name,
"first_name": user.value.first_name,
"last_name": user.value.last_name,
"creator_email": user.value.email,
}

return this.http.post("http://www.your/api/here.com", data, 
{headers:headers}).subscribe(
(res)=>{
 // console.log('success');
console.log(res);
},
err=>{
console.log(" Error..");
 } 
 );
0
Nileshdeora1122