更新メソッドは、コントローラangular2に何も投稿しませんでした

Question

私はangular2のコメントのための基本的なcrudアプリケーションを作ろうとしていますが、私は把握できないという奇妙な問題を抱えています。 データを更新しようとするたびに、コントローラメソッドに送信しているパラメータがnullであるという500の内部サーバーエラーが発生します。私はPOSTのために同じメソッドを使用しましたが、POST中に更新メソッドはコントローラにデータを送信しません。私を助けてください！

Comments.component.html

<p-growl [value]="msgs"></p-growl> 
<div class="container" *ngIf="showMaster"> 
<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)"> 
    <p-panel header="Validate"> 
     <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px"> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"> 
        Comment Code *: 
       </div> 
       <div class="ui-grid-col-6"> 
        <p-inputMask formControlName="commcode" mask="99/9999" #commcode 
           placeholder="Required" [(ngModel)]="comment.CommCode"></p-inputMask> 
       </div> 
       <div class="ui-grid-col-4"> 
        <div class="ui-message ui-messages-error ui-corner-all" 
         *ngIf="!userform.controls['commcode'].valid&&userform.controls['commcode'].dirty"> 
         <i class="fa fa-close"></i> 
         Comment Code is required 
        </div> 
       </div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"> 
        Person Name *: 
       </div> 
       <div class="ui-grid-col-6"> 
        <input pInputText type="text" formControlName="persname" placeholder="Required" [(ngModel)]="comment.PersName"/> 
       </div> 
       <div class="ui-grid-col-4"> 
        <div class="ui-message ui-messages-error ui-corner-all" 
         *ngIf="!userform.controls['persname'].valid&&userform.controls['persname'].dirty"> 
         <i class="fa fa-close"></i> 
         Person Name is required 
        </div> 
       </div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"> 
        Company Name *: 
       </div> 
       <div class="ui-grid-col-6"> 
        <input pInputText type="text" formControlName="compname" placeholder="Required" [(ngModel)]="comment.CompanyName"/> 
       </div> 
       <div class="ui-grid-col-4"> 
        <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['compname'].valid&&userform.controls['compname'].dirty"> 
         <i class="fa fa-close"></i> 
         Company Name is required 
        </div> 
       </div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"> 
        Branch : 
       </div> 
       <div class="ui-grid-col-6"> 
        <input pInputText type="text" formControlName="branch" placeholder="Required" [(ngModel)]="comment.BranchName"/> 
       </div> 
       <div class="ui-grid-col-4"> 
        <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['branch'].valid&&userform.controls['branch'].dirty"> 
         <i class="fa fa-close"></i> 
         <span *ngIf="userform.controls['password'].errors['required']">Branch Name is required</span> 
        </div> 
       </div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"> 
        Comments: 
       </div> 
       <div class="ui-grid-col-6"> 
        <textarea pInputTextarea type="text" formControlName="comment" [(ngModel)]="comment.Comment"></textarea> 
       </div> 
       <div class="ui-grid-col-4"></div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"></div> 
       <div class="ui-grid-col-6"> 
        <button pButton type="submit" label="Submit" [disabled]="!userform.valid" *ngIf="newComment"></button> 
       </div> 
       <div class="ui-grid-col-4"></div> 
      </div> 
      <div class="ui-grid-row" *ngIf="updateComment"> 
       <div class="ui-grid-col-2"></div> 
       <div class="ui-grid-col-6"> 
        <button pButton type="submit" label="Update" [disabled]="!userform.valid" *ngIf="updateComment"></button> 
       </div> 
       <div class="ui-grid-col-6"> 
        <button pButton type="submit" label="Delete" [disabled]="!userform.valid" *ngIf="updateComment"></button> 
       </div> 
       <div class="ui-grid-col-4"></div> 
      </div> 
     </div> 
    </p-panel> 
</form> 

コメント

Comments.component.ts

import {Component, OnInit} from '@angular/core'; 
    import {Message} from '../message'; 
    import {Validators, FormControl, FormGroup, FormBuilder} from '@angular/forms'; 
    import {Comment} from './comment'; 
import {AppService} from '../app.service'; 

@Component({ 
    selector: 'commments', 
    templateUrl: '/app/comments/comment.component.html' 
}) 


export class CommentsComponent implements OnInit { 

    comments: Comment[]; 
    selectedComment: Comment[]; 
    comment: Comment = new PrimeComment(); 
    newComment: boolean; 
    msgs: Message[] = []; 
    userform: FormGroup; 
    showMaster: boolean; 
    updateComment: boolean; 
    disadd: boolean; 
    constructor(private fb: FormBuilder, private _appService: AppService) { } 

    divComment() { 
     this.showMaster = true; 
     this.newComment = true; 
     this.updateComment = false; 

     this.comment.CommCode = ''; 
     this.comment.PersName = ''; 
     this.comment.BranchName = ''; 
     this.comment.Comment = ''; 
     this.comment.CompanyName = ''; 
    } 

    getComments() { 
     this._appService.getComments().subscribe(
      res => this.comments = res 
     ); 
    } 

    ngOnInit() { 
     this.userform = this.fb.group({ 
      'commcode': new FormControl('', Validators.required), 
      'persname': new FormControl('', Validators.required), 
      'compname': new FormControl('', Validators.required), 
      'branch': new FormControl('', Validators.required), 
      'comment': new FormControl('', Validators.required), 
     }); 
     this.getComments(); 
    } 

    onSubmit(value: string) { 
     this.msgs = []; 
     this.msgs.push({ severity: 'info', summary: 'Success', detail: 'Form Submitted' }); 
     this.showMaster = false; 
     this.disadd = false; 

     if (this.newComment) { 
      this._appService.postComments(this.comment).subscribe(
       res => this.comments = res 
      ); 
     } 
     else { 
      this._appService.updateComments(this.comment).subscribe(
       res => this.comments = res 
      ); 
     } 
    } 

    onRowSelect(event) { 
     this.disadd = true; 
     this.showMaster = true; 
     this.newComment = false; 
     this.updateComment = true; 
     this.comment = this.cloneComment(event.data); 
    } 

    cloneComment(c: Comment): Comment { 
     let comment = new PrimeComment(); 
     for (let prop in c) { 
      comment[prop] = c[prop]; 
     } 
     return comment; 
    } 

    //get diagnostic() { 
    // //return JSON.stringify(this.userform.value); 
    //} 

} 


class PrimeComment implements Comment { 
    constructor(public CommCode?, public PersName?, public CompanyName?, public BranchName?, public Comment?) { } 
} 

App.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Headers, Response} from '@angular/http'; 
import {Comment} from './comments/comment'; 
@Injectable() 

export class AppService { 
    constructor(private _http: Http) { } 

    getComments() { 
     return this._http.get('Comments/GetComments').map(res => res.json()); 
    } 

    postComments(c: Comment) { 
     var json = JSON.stringify(c); 
     var header = new Headers(); 
     header.append('Content-Type', 'application/json'); 
     return this._http.post('Comments/PostComments', json, { headers: header }).map(res => res.json()); 
    } 

    updateComments(cd: Comment) { 
     var json1 = JSON.stringify({ cd }); 
     var header = new Headers(); 
     header.append('Content-Type', 'application/json'); 
     return this._http.post('Comments/UpdateComments', json1, { headers: header }).map(res => res.json()); 
    } 

    delComments(commcode: Comment) { 
     var json = JSON.stringify(commcode); 
     var header = new Headers(); 
     header.append('Content-Type', 'application/json'); 
     return this._http.post('Comments/DeleteComments', json, { headers: header }).map(res => res.json()); 
    } 

} 

Answer 1

まず最初に一緒にformControl & [（ngModel）]を使用する必要はありません。

//このようにあなたのフォームにアクセスしてください。 userform：FormGroup;

constructor(fb: FormBuilder) { 
    this.userform = fb.group({ 
     commcode: '', 
     persname: '', 
     .... 

    }); 
} 

onSubmit(){ 
    console.log(this.userform.value); 
    //update your post params 
}