cant bind data between object to a modal

Question

i'm trying to bind data between a modal that it content is a form for editing data. i'm using the ng-model directive , but the object in the component isn't binding with the data. i want to bind the data of the form and then create an instance of an object representing the form data in order to submit it.

component:

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

}

modal:

<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>

Is this a lazy loaded template for the modal? Maybe using `async` might help. Does this meet your problem? https://stackoverflow.com/questions/42878506/angular-2-passing-html-to-ng-content-with-bindings — Guntram, Sep 06 '17 at 22:31

score 0 · Answer 1 · answered Sep 07 '17 at 06:14

In order to bind all the form control values to your form object i.e. bookForm, you have to use formControlName or name attribute for each form control. Object cannot bind to model, in case of form by using NgModel.

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

When accessing the form in form submit method onSubmit(), it can be done as:

this.form.value

The JSON structure for your form object will be:

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

which you can then stringify and send via POST request.

cant bind data between object to a modal

1 Answers1