Is there away to send Json Data from a form with Angular 8

R

Rashsmit

Guest
I want to send Json data from my model variable that has all my form bindings. When I use postman the requests go through but when I do it in angular it doesn't work. I have no idea what I am doing so that it doesn't send my post request properly but I can't get it to format correctly.I keep on getting a observable when I console.log my request. I tried everything but it's not working. I get this error with my spring boot application:

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Sun Oct 06 12:26:12 EDT 2019
There was an unexpected error (type=Bad Request, status=400).
Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; nested exception is java.lang.NumberFormatException: For input string: "new"
org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; nested exception is java.lang.NumberFormatException: For input string: "new"
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:132)
at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:127)
at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:167)
at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:134)
at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:104)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:892)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:797)
at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1039)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)
at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:92)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:526)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:860)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1587)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.base/java.lang.Thread.run(Thread.java:834)
Caused by: java.lang.NumberFormatException: For input string: "new"
at java.base/java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.base/java.lang.Integer.parseInt(Integer.java:652)
at java.base/java.lang.Integer.valueOf(Integer.java:983)
at org.springframework.util.NumberUtils.parseNumber(NumberUtils.java:211)
at org.springframework.beans.propertyeditors.CustomNumberEditor.setAsText(CustomNumberEditor.java:115)
at org.springframework.beans.TypeConverterDelegate.doConvertTextValue(TypeConverterDelegate.java:429)
at org.springframework.beans.TypeConverterDelegate.doConvertValue(TypeConverterDelegate.java:402)
at org.springframework.beans.TypeConverterDelegate.convertIfNecessary(TypeConverterDelegate.java:155)
at org.springframework.beans.TypeConverterSupport.convertIfNecessary(TypeConverterSupport.java:73)
at org.springframework.beans.TypeConverterSupport.convertIfNecessary(TypeConverterSupport.java:53)
at org.springframework.validation.DataBinder.convertIfNecessary(DataBinder.java:693)
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:124)
... 51 more


This is a link to my live code: live

home.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Newproduct } from '../model/Newproduct';
import { catchError, retry } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';
import { FormGroup } from '@angular/forms';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json;charset=UTF-8',
'Transfer-Encoding':'chunked',

})
};
@Injectable({
providedIn: 'root'
})
// @ts-ignore
export class HomeService {


constructor(private http: HttpClient) {
}


getAll(): Observable<any> {
return this.http.get('http://localhost:8080/api/product');
}
getByPriceAsc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/price/up');
}
getByPriceDesc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/price/down');
}
getBySaleAsc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/sale/up');
}
getBySaleDesc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/sale/down');
}

getByDiscountAsc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/discount/up');
}
getByDiscountDesc():Observable<any>{
return this.http.get('http://localhost:8080/api/product/discount/down');
}

getByParm(availability,category):Observable<any>{

return this.http.get( 'http://localhost:8080/api/'+'product/category/'+ availability +'/'+ category);


}


addProduct(model:any):Observable<any>{
console.log( this.http.post<any>('http://localhost:8080/api/product/new',model,httpOptions));
return this.http.post<any>('http://localhost:8080/api/product/new',model,httpOptions);
}



}



product-form.ts


import { Component, OnInit } from '@angular/core';
import { Product } from '../model/Product';
import { Category } from '../model/Category';
import { Supplier } from '../model/Supplier';
import { SupplierService } from '../service/Supplier.service';
import { CategoryService } from '../service/Category.service';
import { Newproduct } from '../model/Newproduct';
import { Injectable } from '@angular/core';
import { Home } from '../model/Home';
import { HomeService } from '../service/Home.service';
import { NgForm } from '@angular/forms';
import { HttpHeaders } from '@angular/common/http';


@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

suppliers: Supplier[];
categories: Category[];
value: number;
model = { productName: '', category: {category: null, categoryName: null}, fullPrice: '', salePrice:'', availability: false, supplier: {supplier:null,supplierName:null},
discount:null };

json = JSON.stringify(this.model);

// model = new Newproduct(null,new Category( this.value,"name"),null,null,false,new Supplier(null,null),null);
GetSelectedValue(change){
console.log(change);
}
GetSelectedValue1(change){
console.log(change);
}
submitted = false;
get diagnostic() { return JSON.stringify(this.model)};



onSubmit() {
console.log(JSON.stringify(this.model));
this.homeService.addProduct(this.model);
}

constructor(private supplierService: SupplierService,private categoryService: CategoryService,private homeService: HomeService) { }

ngOnInit() {

this.supplierService.getAll().subscribe(data => {
this.suppliers = data;
});




this.categoryService.getAll().subscribe(data => {
this.categories = data;
});
}
}


I tried everything I possibly could think of switching forms structure. json.strinify to get my code to json format. it works perfectly in postman so I think that it's a problem with my httpclient and how I am structuring the post request.

Continue reading...
 
Top