角度2のフォームは、投稿のメソッドを取得

Question

角度2のフォームの提出に取り組んでいる間、私は問題に遭遇します。コンポーネントの中にオブジェクトを作成すると、すべてうまく動作し、フォームはpostメソッドを介して送信されます。しかし、コンポーネントの外のクラスからオブジェクトを使用しているとき、私のフォームはurlでリクエストを送信しますhttp://localhost:4200/blog?title=sss&content=ssssss

これはなぜ起こっているのですか？

テンプレート：

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

コンポーネント：

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

ブログクラス。私はなぜこれが起こっているかわからないが、this.form.valueを使用しないようにしよう任意の助け

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

感謝:)

Answer 1

：

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

そして、この：私はこの両方を試してみました。

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

あなたのページをご利用ください。今すぐこのコードが動作するはずです。