オブジェクト間のデータをバインドできない

Question

私はデータを編集するためのフォームであるというモーダル間でデータをバインドしようとしています。私はng-modelディレクティブを使用していますが、コンポーネント内のオブジェクトはデータとバインドされていません。 私はフォームのデータをバインドし、それを送信するためにフォームデータを表すオブジェクトのインスタンスを作成します。

コンポーネント：

import { Component, OnInit, TemplateRef } from '@angular/core'; 
import { BookInterface } from './book'; 
import { BookService } from './book.service'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; 
import { BookClass } from './book-class'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: 'books-list.component.html', 
    styleUrls: ['books-list.component.css'] 
}) 

export class BookListComponent implements OnInit { 
    pageTitle: string = 'Book List'; 
    imageWidth: number = 100; 
    imageMargin: number = 2; 
    listFilter: string; 
    errorMessage: string; 
    book = new BookClass(0, "", "", new Date("February 4, 2016 10:13:00"), ""); 
    books: BookInterface[]; 
    public modalRef: BsModalRef; 

    constructor(private _bookService: BookService, private modalService: 
    BsModalService) { 

    } 
    ngOnInit(): void { 
    this._bookService.getBooks() 
     .subscribe(books => this.books = books, 
     error => this.errorMessage = <any>error); 
    } 
    public openModal(template: TemplateRef<any>) { 
    this.modalRef = this.modalService.show(template); 
    } 

    onSubmit(): void { 
    this._bookService.editBook(this.book); 
    } 
    // TODO: Remove this when we're done 
    get diagnostic() { return JSON.stringify(this.book); } 

} 

モーダル：

<ng-template #template> 
    <div class="modal-header"> 
    <h4 class="modal-title pull-left">Modal</h4> 
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <h1>Book Edit</h1> 
    {{diagnostic}} 
    <form (ngSubmit)="onSubmit()" #bookForm="ngForm"> 
     <div class="form-group"> 
     <input type="hidden" class="form-control" id="bookId" name="bookId" [(ngModel)]="book.bookId"> 
     </div> 
     <div class="form-group"> 
     <input type="hidden" class="form-control" id="imageUrl" name="imageUrl" [(ngModel)]="book.imageUrl"> 
     </div> 
     <div class="form-group"> 
     <label for="title">Book Title</label> 
     <input type="text" class="form-control" id="bookTitle" name="bookTitle" [(ngModel)]="book.bookTitle" #bookT="ngModel" required> 
     <div *ngIf="bookT.invalid" class="alert alert-danger"> 
      <div *ngIf="bookT.errors.required"> 
      Book Title is required. 
      </div> 
     </div> 
     </div> 
    </form> 
    </div> 
</ng-template> 

Answer 1

フォームオブジェクトすなわちbookFormにすべてのフォームコントロールの値をバインドするために、あなたは、各フォームのコントロールのためにformControlNameまたはname属性を使用する必要があります。フォームの場合、NgModelを使用してオブジェクトをモデルにバインドすることはできません。フォームオブジェクトのJSON構造はなり

this.form.value 

：

this.form.value => { bookId: '#a213", imageUrl: 'http://www.example.com/a1', bookTitle: 'A Song of Ice and Fire'} 

た

形式でフォームにアクセスする方法をonSubmitを（提出

<input type="hidden" class="form-control" id="bookId" name="bookId"> 

）、それはのように行うことができますあなたは文字列化し、POST要求を介して送信することができます。