I have built an Angular form in my app.component.html file, and I am trying to submit the field inputs to an API via the app.component.ts file. How would I refer to the inputs from the .html file in the .ts file (where I am passing the data to an API)?

The submit button in the .html file is defined like this:

```
<button (click)="addCust(custJSON)" type="submit" class="btn btn-success" [disabled]="!customerForm.form.valid">Submit</button>

```

Creating a JSON object out of all the input fields, also in the .html file:

```
<script>var custJSON = {{customerForm.value | json}};</script>
{{customerForm.value | json}}

```

The function, defined in my .ts file:

```
addCust(custJSON) {
  this.httpClient.post(`api url`,
  {
     custName: custJSON.custName,
     phone: custJSON.phone,
     etc
  })
  .subscribe(
    (data:any) => {
      console.log(data);
    }
  )
}

```

The error I get right now is that `custJSON` is undefined. Hardcoding the data in the addCust method works fine, but the goal is to upload input from the form to the API. How do I get data from the .html file to the .ts file?

EDIT: Here is the updated HTML for my form:

```
<div class="container">
<form ngNativeValidate (ngSubmit)="onSubmit(customerForm)" action="/action_page.php" name="myForm" #customerForm="ngForm">

<div class="form-group row">
<label for="custName" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="custName" placeholder='Name' maxlength=100 required [(ngModel)]="model.custName" name="custName" #custName="ngModel" style="width: 40em">
    </div>
    <div [hidden]="custName.valid || custName.pristine" class="alert alert-danger">
        Name is required
    </div>
  </div>

  <div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">Phone</label>
  <div class="col-sm-10">
    <input pattern=".{14,14}" type="number" class="form-control" id="phone" placeholder="011 1 111 222 3333" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" minLength="14" maxLength="14" style="width: 18em" required [(ngModel)]="model.phone" name="phone" #phone="ngModel">
  </div>
<!-- <button class="addfields" type="button" >+</button> -->
<br><div [hidden]="phone.valid || phone.pristine" class="alert alert-danger">
  Phone is required
</div>

  </div>

  <div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email Address</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="email" placeholder='ab@cd.com' maxlength=64 required [(ngModel)]="model.email" name="email" #email="ngModel" style="width: 40em">
  </div>
<div [hidden]="email.valid || email.pristine"
     class="alert alert-danger">
  Email Address is required
</div>
  </div>

  <button type="submit" class="btn btn-success" [disabled]="!customerForm.form.valid">Submit</button>

  </form>

    <div [hidden]="!submitted">

    <div class="row">
    <div class="col-xs-3">JSON: <br></div>
    <pre id="result"></pre>
</div>

    <script>var custJSON = new JSON({{customerForm.value | json}});</script>
{{customerForm.value | json}} 

<br><br><br><button class="btn btn-primary" (click)="submitted=false">Edit</button><br><br><br><br><br>

```

EDIT: Updated ts file after making edits according to @penleychan:

```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Customer }    from '../customer';
import { HttpClient } from '@angular/common/http';
import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { Injectable } from '@angular/core';
import { Customer } from './customer';
import 'rxjs/add/operator/toPromise';
import { CustomerFormComponent } from './customer-form.component';

@Component({
  selector: 'app-customer-form',
  templateUrl: './customer-form.component.html',
  styleUrls: ['./customer-form.component.css']
})
export class CustomerFormComponent {
  custName:string;
  phone:number;
  email:string;

  model = new Customer('qt', 34823940903812, 't@t');

  submitted = false;

  constructor(private httpClient:HttpClient){  }

  onSubmit(form: NgForm) {
    console.log(form.value);

    this.submitted = true;

    this.httpClient.post<Customer>(`api url`,
      {
         custName: form.value.custName,
         phone: form.value.phone,
         email: form.value.email

         //this.result = form.value;
      })
      .subscribe(
        (data:any) => {
          console.log(data);
        }
      )
    }

  }

}

```