Как двусторонне связать значение формы с вложенной угловой моделью

Question

Я новичок в угловой или фронтальной разработке в этом отношении.Я пытаюсь двусторонне связать значение формы с «полями вложенного массива» угловой модели.К сожалению, это не работает и возвращает неопределенные ошибки или ошибки.Конечно, для меня это ошибка, пожалуйста, совет по исправлению.

Код выглядит следующим образом:

customer.model.ts

export class Customer {
customerID:String;
customerName:String;
contract:Contract[];
}

export class Contract{
    customerID: String;
    startDate: Date;
    endDate:  Date ;
    conditions: String;
    price: Number;
    author: String; 
}

customer.component.ts

//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) => {
      this.resetForm(form);
       M.toast({ html: 'Saved successfully', classes: 'rounded' });
    });


  }


}

customer.service.ts

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);
  }


}

customer.component.html (только дляфрагмент)

Вариант 1:

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract.startDate"
                      placeholder="Enter Contract Start Date">

Вариант 2:

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[0].startDate"
                          placeholder="Enter Contract Start Date">

Вариант 3:

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[].startDate"
                          placeholder="Enter Contract Start Date">

Вариант 4:

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[startDate]"
                      placeholder="Enter Contract Start Date">