Update method didn't post anything to controller angular2 - sql

Question

I am trying to make a basic crud app for comments in angular2 but I am having a bizarre issue that I cant figure out.
Whenever I try to update the data I get 500 internal server error which says the the parameters I am sending to my controller method are null. Although I used same method for POST but the update method doesn't send data to controller while POST does. Help me out in this please!
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
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

First thing no need to use formControl & [(ngModel)] together.
//access your form like this
userform: FormGroup;
constructor(fb: FormBuilder) {
this.userform = fb.group({
commcode: '',
persname: '',
....
});
}
onSubmit(){
console.log(this.userform.value);
//update your post params
}