title: How to two-way bind a form value to a nested angular model
body: <p>I am new to angular or front-end development for that matter. I am trying to two-way bind a form value to a 'nested array fields' of angular model. Unfortunately, it doesn't work and returns undefined or errors. Certainly looks like a blunder to me, please advice on a fix.</p>
  
  <p>Code as follows,</p>
  
  <p><strong>customer.model.ts</strong></p>
  
  <pre><code>export class Customer {
  customerID:String;
  customerName:String;
  contract:Contract[];
  }
  
  export class Contract{
      customerID: String;
      startDate: Date;
      endDate:  Date ;
      conditions: String;
      price: Number;
      author: String; 
  }
  </code></pre>
  
  <p><strong>customer.component.ts</strong></p>
  
  <pre><code>//Package imports
  import { Component, OnInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  
  //local imports
  import { CustomerService } from '../shared/customer.service';
  import { Contract,Customer } from '../shared/customer.model';
  
  declare var M: any;
  
  @Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css'],
    providers: [CustomerService]
  })
  export class CustomerComponent implements OnInit {
  
    constructor(private customerService: CustomerService) { }
  
    ngOnInit() {
      this.resetForm();
    }
  
    resetForm(form?: NgForm) {
      if (form) {
        form.reset();
  
        this.customerService.selectedCustomer = {
  
          customerID: "",
          customerName: "",
          contract: [
            {
              customerID: "",
              startDate: null,
              endDate: null,
              conditions: "",
              price: null,
              author: ""
            }
          ]
        }
      }
    }
  
    onSubmit(form: NgForm) {
  
      this.customerService.postCustomer(form.value).subscribe((res) =&gt; {
        this.resetForm(form);
         M.toast({ html: 'Saved successfully', classes: 'rounded' });
      });
  
  
    }
  
  
  }
  </code></pre>
  
  <p><strong>customer.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/Operatoroperator';
  
  
  import { Customer,Contract } from './customer.model';
  
  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  @Injectable({
    providedIn: 'root'
  })
  export class CustomerService {
    selectedCustomer: Customer|{}={};
     customers: Customer[];
  
    readonly baseURL = 'http://localhost:3000/customers';
  
    constructor(private http: HttpClient) { }
  
    postCustomer(cust: Customer) {
      console.log('front end cust value' + cust + '---' + cust.contract + '----' + cust.customerID + '----' + cust.customerName);
      return this.http.post(this.baseURL, cust);
    }
  
  
  }
  </code></pre>
  
  <p><strong>customer.component.html (only snippet)</strong></p>
  
  <p><strong>Option 1 :</strong></p>
  
  <pre><code>&lt;input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract.startDate"
                        placeholder="Enter Contract Start Date"&gt;
  </code></pre>
  
  <p><strong>Option 2 :</strong></p>
  
  <pre><code>&lt;input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[0].startDate"
                            placeholder="Enter Contract Start Date"&gt;
  </code></pre>
  
  <p><strong>Option 3 :</strong></p>
  
  <pre><code>&lt;input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[].startDate"
                            placeholder="Enter Contract Start Date"&gt;
  </code></pre>
  
  <p><strong>Option 4:</strong></p>
  
  <pre><code>&lt;input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[startDate]"
                        placeholder="Enter Contract Start Date"&gt;
  </code></pre>