Angular 2 Form, Get-Methode statt Post

Question

Während der Arbeit am Angular 2 Formular einreichen, stoße ich auf ein Problem. Wenn ich ein Objekt innerhalb einer Komponente erstelle, funktioniert alles gut und mein Formular wird per Post-Methode gesendet. Aber wenn ich ein Objekt aus einer Klasse außerhalb der Komponente verwende, sendet mein Formular eine Anfrage mit der Adresse http://localhost:4200/blog?title=sss&content=ssssss

Weiß jemand, warum das passiert?

Vorlage:

<form (ngSubmit)="onSubmit()" #f="ngForm"> 
    <!-- <form #f="ngForm" (ngSubmit)="onSubmit(f)">--> 
     <div class="form-group"> 
     <label for="title">Tytuł</label> 
     <textarea class="form-control" id="title" rows="1" 
        ngModel name = "title" required minlength="3" #title="ngModel"></textarea> 
     <span class="help-block" *ngIf="!title.valid && title.touched">Wprowadzono za krótki tekst (minum to 3 znaki).</span> 
     <label for="content">Zawartość:</label> 
     <textarea class="form-control" id="content" rows="3" 
        ngModel name = "content" required minlength="3" #content="ngModel"></textarea> 
     <span class="help-block" *ngIf="!content.valid && content.touched">Wprowadzono za krótki tekst (minum to 3 znaki).</span> 
     </div> 
     <button type="submit" class="btn btn-primary" 
       [disabled] ="!f.valid" 
     >Wyślij</button> 
    </form> 

Komponente:

import {Component, OnInit, ViewChild} from '@angular/core'; 
import {NgForm} from "@angular/forms"; 
import {Blog} from "../../shared/blog"; 
import {BlogService} from "../../services/blog.service"; 

@Component({ 
    selector: 'app-blog-form', 
    templateUrl: './blog-form.component.html', 
    styleUrls: ['./blog-form.component.css'] 
}) 
export class BlogFormComponent implements OnInit { 

    @ViewChild('f') form: NgForm; 
    errorMessage: string; 
/* this works well 
blog = { 
    title: '', 
    content: '', 
    dateCreated: '' 
    }*/ 

//this doesn't work 
blog: Blog; 

    ngOnInit(){} 

    onSubmit(){ 
    this.blog.title = this.form.value.title; 
    this.blog.content = this.form.value.content; 
    } 
} 

Die Blog-Klasse. Ich habe versucht, sowohl das:

export class Blog { 
    constructor(public title = '', public content = '', public dateCreated = ''){}} 

Und:

export class Blog { 
    constructor(public title : string, public content : string, public dateCreated : string){}} 

Vielen Dank für jede Hilfe :)

Answer 1

Ich bin nicht sicher, warum dies geschieht, aber versuchen Sie nicht this.form.value verwenden.

onSubmit(){ 
    this.blog.title = this.form.title; 
    this.blog.content = this.form.content; 
    console.log(this.blog); 
} 

Verwendung von Wert posts zurück Ihre Seite. Jetzt sollte dieser Code funktionieren.