title: form value is not added to database
body: <p><a href="https://i.stack.imgur.com/8i8rD.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>i am using angular to insert the new customer object by calling the java api but the customer object is not inserted.The customer object submitted from form is not inserted in the database. however the getCustomers() method does works. The form data is being fetched upto addCustomer(customer:Customer) method of the data.service.ts but it is not added to the database.</p>
  
  <pre><code>1. CustomerController.java
  
  @RestController
  @RequestMapping("/api")
  @CrossOrigin(origins = "http://localhost:4200", allowedHeaders ="*" )
  public class CustomerResource {
  @Autowired
  private CustomerServiceImpl customerServiceImpl;
  
  @PostMapping("/customers")
  public Customer addCustomer(@RequestBody Customer customer){
      return customerServiceImpl.addCustomer(customer);
  }  
  </code></pre>
  
  <p>2.create-customer.component.html 
      <h3>Create Customer Form</h3></p>
  
  <pre><code>&lt;form&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="firstName"&gt;First Name&lt;/label&gt; &lt;input type="text"
                                                     class="form-control" 
  id="firstName" required
  
  [(ngModel)]="customer.firstName" name="firstName"&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label for="lastname"&gt;Last Name&lt;/label&gt; &lt;input type="text"
                                                   class="form-control" 
  id="lastname" required
  
  [(ngModel)]="customer.lastName" name="lastname"&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label for="address"&gt; Address&lt;/label&gt; &lt;input type="text"
                                                   class="form-control" 
  id="address" required
  
  [(ngModel)]="customer.address" name="address"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="btn-group"&gt;
    &lt;button class="btn btn-primary" (click)="goBack()"&gt;Back&lt;/button&gt;
    &lt;a routerLink="/customers" class="btn btn-success" 
  (click)="onSubmit()"&gt;Submit&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;  
  
  
  3.Create-customer.component.ts
  
  @Component({
  selector: 'app-create-customer',
  templateUrl: './create-customer.component.html',
  styleUrls: ['./create-customer.component.css']
  })
  
  
  
  export class CreateCustomerComponent implements OnInit {
  customer = new Customer;
  constructor(private dataService: DataService, private locaion: Location) 
  { }
  ngOnInit() {
  }
  
  add(): void {
  /*console.log(this.customer);*/
  this.dataService.addCustomer(this.customer);
  }
  
  onSubmit(): void {
  this.add();
  }
  goBack(): void {
  this.locaion.back();
  }
  }  
  
  
  4.data-service.ts 
  
  const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  
  @Injectable({
  providedIn: 'root'
  })
  export class DataService {
  private customersUrl = 'http://localhost:8080/api/customers';
  constructor(private http: HttpClient) { }
  
  
  getCustomers(): Observable&lt;Customer[]&gt; {
  return this.http.get&lt;Customer[]&gt;(this.customersUrl)
    .pipe(
      catchError(this.handleError('getCustomers', []))
    );
  }
  
  
  addCustomer (customer: Customer): Observable&lt;Customer&gt; {
  console.log(customer);
  return this.http.post&lt;Customer&gt;(this.customersUrl, customer, httpOptions)
    .pipe(
    catchError(this.handleError&lt;Customer&gt;('addCustomer'))
  );
  }
  
  private handleError&lt;T&gt; (operation = 'operation', result?: T) {
  return (error: any): Observable&lt;T&gt; =&gt; {
    console.error(error); // log to console instead
    return of(result as T);
  };
  }
  }
  </code></pre>