Forme angulaire 2, obtenir la méthode istead de la poste

Question

Tout en travaillant sur la forme Angulaire 2 soumettre je rencontre un problème. Quand je crée un objet à l'intérieur d'un composant, tout fonctionne bien et ma forme est soumise via la méthode post. Mais quand j'utilise un objet d'une classe en dehors du composant, mon formulaire envoie une requête get avec l'URL http://localhost:4200/blog?title=sss&content=ssssss

Est-ce que quelqu'un sait pourquoi cela se produit?

Modèle:

<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> 

Composant:

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; 
    } 
} 

La classe Blog. J'ai essayé à la fois ceci:

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

Et ceci:

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

Merci pour toute aide :)

Answer 1

Je ne sais pas pourquoi cela se produit, mais essayez de ne pas utiliser this.form.value.

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

L'utilisation de messages de valeur vous permet de sauvegarder votre page. Maintenant, ce code devrait fonctionner.