title: Is there away to send Json Data from a form with Angular 8
body: <p>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 think angular is adding the keyword "new" to my response body.This is a link to <strong>my live code:</strong> <a href="https://stackblitz.com/github/RashellSmith/Dashboard-FrontEnd/tree/Weekend-Changes" rel="nofollow noreferrer">live</a>
   I get this error with my spring boot application:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>home.service.ts</p>
  
  <pre><code>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&lt;any&gt; {
      return this.http.get('http://localhost:8080/api/product');
    }
    getByPriceAsc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/price/up');
    }
    getByPriceDesc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/price/down');
    }
    getBySaleAsc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/sale/up');
    }
    getBySaleDesc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/sale/down');
    }
  
    getByDiscountAsc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/discount/up');
    }
    getByDiscountDesc():Observable&lt;any&gt;{
      return this.http.get('http://localhost:8080/api/product/discount/down');
    }
  
    getByParm(availability,category):Observable&lt;any&gt;{
  
      return this.http.get( 'http://localhost:8080/api/'+'product/category/'+ availability +'/'+ category);
  
  
    }
  
  
    addProduct(model:any):Observable&lt;any&gt;{
      console.log( this.http.post&lt;any&gt;('http://localhost:8080/api/product/new',model,httpOptions));
      return this.http.post&lt;any&gt;('http://localhost:8080/api/product/new',model,httpOptions);
    }
  
  
  
  }
  
  </code></pre>
  
  <p>product-form.ts</p>
  
  <pre><code>
  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 =&gt; {
        this.suppliers = data;
      });
  
  
  
  
      this.categoryService.getAll().subscribe(data =&gt; {
        this.categories = data;
      });
    }
  }
  </code></pre>
  
  <p>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.</p>