更新方法未向控制器 angular2 发布任何内容

Question

我正试图在angular2中创建一个基本的crud应用程序，但我有一个奇怪的问题，我无法弄清楚。每当我尝试更新数据时，我都会得到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 
}