Angular-通过表单html发布数据时提供空对象

Question

当我尝试将数据填充到表单时，表单传递空对象。我在Web中使用angular 4和CoreUI。对于ApiConfig，我在npm中使用Active-record，并将其扩展到我的代码中。 我已经尝试使用Google搜索，但是仍然无法获得针对我的问题的正确答案。

如何解决？

colors.component.html

     <form (ngSubmit)="postContact(contactForm.value)" #contactForm="ngForm">
  <div class="form-group">
    <label for="exampleInputEmail1"></label>

    <input type="text" class="form-control" [(ngModel)]="Contact.name"  name ="name" placeholder="Name"  required>


  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Nomor Telephone</label>

    <input type="password" class="form-control"  [(ngModel)]="Contact.number"  name ="number" placeholder="Your Number"  required>

  </div>
  <div class="form-check">
    <label class="form-check-label">

    </label>
  </div><!-- 
  <button type="submit" class="btn btn-primary">Submit</button>
  <button ng-click="onSubmlit()">OK</button> -->
  <button class="btn btn-primary" (click)="postContact()">Submit</button>
</form>
<p></p>
<h3>Phone Book List</h3>
<p>

<li *ngFor="let index of  contacts">
   Name : {{ index.name }} - Number : {{ index.number }} 
  </li>
</p>

color.service.ts

    import {Injectable}         from '@angular/core';
import {Response}           from '@angular/http';
import {Http} from           '@angular/http';
import {ActiveRecord, ApiConfig} from '../../lib/active-record';

export interface Contact {
  name: String;
  number: Number;
}

@Injectable()
export class ContactService extends ActiveRecord<Contacts> {
  constructor(public options: ApiConfig, public http: Http) { 
    super(options, http, "contacts");

  }
}

colors.component.ts

import { Component, OnInit } from '@angular/core';

import { getStyle, rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'

import { HttpClient } from '@angular/common/http';
import {NgForm} from '@angular/forms';
import { OrderPipe } from 'ngx-order-pipe';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';

//Active records

import {Contact} from '../../service/contact.service'
import {ContactService} from '../../service/contact.service'
import {Router} from '@angular/router';
//import {AuthHttp, AuthConfig, tokenNotExpired, JwtHelper} from "angular2-jwt";


@Component({
  selector: 'contacts',
  templateUrl: 'colors.component.html',
  providers: [ContactService]
})

export class ColorsComponent implements OnInit {

  //constructor(private http: HttpClient){  }
  constructor(private _contactService: ContactService, private _parentRouter: Router) {}
    errorMessage: string;
    Contact: Contact[];

   ngOnInit() { this.getContacts();  }

    getContacts() {
        this._contactService.findAll()
        .then(
            contacts => this.contacts = contacts
        ).catch();
    }

    postContact(contact: Contact){
      this._contactService.insert( {contacts: contact}).then(
        res => {}
     ).catch();
      window.location.reload();
    }

        getContactHttp(){
       this.http.get<any>('http://localhost:8080/api/')
       .subscribe(data => {
          this.data=data;}
        }

      // data:Array<any>=[];

      postContactHttp(contact: Contact){
      this.http.post('http://localhost:8080/api/', {
         name: contact.name,
         number: contact.number,

       }).subscribe(data => {


       })
      window.location.reload();

}

 }

//     
//   public onSubmit(contact: Contact):void{
//  this.http.post('http://localhost:8080/api/contacts/', {
//       name: contact.name,
//       number: contact.number,

//     }).subscribe(data => {
//       console.log(JSON.stringify(data));

//     })
//    window.location.reload();

//   }
//   public themeColors(): void {
//     Array.from(document.querySelectorAll('.theme-color')).forEach(function(el) {
//       let elem = document.getElementsByClassName(el.classList[0])[0];
//       let background = getStyle('background-color', elem);

//       let table = document.createElement('table');
//       table.innerHTML = `
//         <table class="w-100">
//           <tr>
//             <td class="text-muted">HEX:</td>
//             <td class="font-weight-bold">${rgbToHex(background)}</td>
//           </tr>
//           <tr>
//             <td class="text-muted">RGB:</td>
//             <td class="font-weight-bold">${background}</td>
//           </tr>
//         </table>
//       `;

//       el.parentNode.appendChild(table);
//     });

//   }

//   ngOnInit(): void {
//  
//     })


//   }
// }