Issue
I am calling onSubmit()
function from contact-form.component.ts file and function is created cmspage.service.ts function is contactForm(formdata: Contact)
I am getting following output in console
Backend returned code 200, body was: [object Object]
<section class="cmspage mtb-40">
<div class="container">
<div class="page-desc" [hidden]="submitted">
<div class="row justify-content-center">
<div class="col-md-8">
<h1>Contact</h1>
<form (ngSubmit)="onSubmit()" #contactForm="ngForm">
<div class="form-group">
<input type="text" name="name" id="name" [(ngModel)]="model.name" class="form-control" placeholder="Name" required #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="error">
<div *ngIf="name.errors.required">
Name is required.
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="email" id="email" [(ngModel)]="model.email" class="form-control" placeholder="E-Mail" required email #email="ngModel">
<div *ngIf="email.invalid && (email.dirty || email.touched)" class="error">
<div *ngIf="email.errors.required">Email is required.</div>
<div *ngIf="email.errors.email">Email must be a valid email address.</div>
</div>
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" [(ngModel)]="model.phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
<textarea name="message" id="message" [(ngModel)]="model.message" rows="5" class="form-control" placeholder="Message" required #message="ngModel"></textarea>
<div *ngIf="message.invalid && (message.dirty || message.touched)" class="error">
<div *ngIf="message.errors.required">Message is required.</div>
</div>
</div>
<div class="form-group">
<button [disabled]="!contactForm.form.valid" class="btn btn-success">Send Message</button>
</div>
</form>
</div>
</div>
</div>
<div class="service-error" *ngIf="error">
<h1>{{error.errorTitle}}</h1>
<h3>{{error.errorDesc}}</h3>
</div>
<div [hidden]="!submitted" class="contact-message">
<div *ngIf="model.id" class="contact-success">
<h2 class="success">Success!</h2>
<h4>Contact form has been successfully submitted.</h4>
<br />
<button (click)="gotoHome()" class="btn btn-info">Go to Home</button>
</div>
</div>
</div>
</section>
contact-form.component.ts
onSubmit(){
console.log(this.model);
this.submitted=true;
return this.cmspageService.contactForm(this.model).subscribe(
data=>this.model=data,
error => this.error=error
);
}
cmspage.service.ts
export class CmspageService {
ServerUtl = "http://localhost/dev/blogger/";
errorData : {};
httpOptions = {
headers:new HttpHeaders({'Content-Type':'application/json'})
};
constructor(private http : HttpClient) { }
contactForm(formdata: Contact){
console.log(formdata);
return this.http.post<Contact>(this.ServerUtl+'api/contact',formdata,this.httpOptions).pipe(
catchError(this.handleError)
)
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong.
console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
}
// return an observable with a user-facing error message
this.errorData = {
errorTitle: 'Oops! Request for document failed',
errorDesc: 'Something bad happened. Please try again later.'
};
return throwError(this.errorData);
}
}
Solution
Check that the backend response is indeed json content and contains the header 'Content-Type' with the value 'application/json'
You can see this in the browser developer tools, under the 'Network' tab.
Edit: With the additional information you added, it appears the backend is not sending json. I'd suggest to fix the backend service, that you appear to have control over since it is a local endpoint.
Answered By - Michael P. Bazos
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.