從窗體獲得輸入值不工作Angular2

Question

我目前使用的模態窗體，當模態打開時，他加載我的項目的信息，但是當我想提交所有輸入爲空 這是我的模態「這部分作品精」

<div id="modal1" class="modal"> 
    <form #formData='ngForm' (ngSubmit)="onSubmit(formData)"> 
    <div class="modal-content"> 
     <div class="row">  
     <div class="input-field col s6"> 
      <input (ngModel)="productN" value="{{ObjProd.product}}" name="productN" type="text" > 
      <label for="productN">Product Name</label> 
     </div> 
     <div class="input-field col s6"> 
      <input (ngModel)="price" value="{{ObjProd.price}}" name="price" type="text" > 
      <label for="price">price</label> 
     </div> 
     <div class="input-field col s6"> 
      <input (ngModel)="quantity" value="{{ObjProd.quantity}}" name="quantity" type="text" > 
      <label for="quantity">quantity</label> 
     </div> 
     <div class="input-field col s6"> 
      <input (ngModel)="photoURL" value="{{ObjProd.product}}" name="photoURL" type="text" > 
      <label for="photoURL">photoURL</label> 

     </div> 
     <input type="text" placeholder="Full name" value="{{ObjProd.key}}" (ngModel)="namef" name="namef" class="txt" > 
     <input type="text" (ngModel)="keyProduct" name="keyProduct" value="{{ObjProd.key}}" > 
     <input type="text" (ngModel)="typeProduct" name="typeProduct" value="{{ObjProd.type}}" > 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat " >Update Product</button> 
    </div> 
    </form> 
</div> 

，這是我的函數提交

onSubmit(formData) { 
    if(formData.value.typeProduct){ 
     console.log(formData.value.photoURL); 
    }else{ 
     console.log(formData.value.namef, formData.value.photoURL); 
    } 

    } 

這是我的工作模式和我的數據 但輸出不工作 http://imgur.com/a/b2CpI

Answer 1

您正在使用index.html中的代碼並使用jQuery並搞亂了應用程序。

相反，你應該使用模式的組成部分作爲單獨的組件，如下

import {Component,Input, ViewChild} from '@angular/core'; 
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'common-modal', 
    template: ` 
    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title pull-left">{{title}}</h4> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <form #formData='ngForm' (ngSubmit)="onSubmit(formData)"> 
    <div class="modal-content"> 
     <div class="row">  
     <div class="input-field col s6"> 
      <input [(ngModel)]="productN" value="true" name="productN" type="text" > 
      <label for="productN">Product Name</label> 
     </div> 
     <div class="input-field col s6"> 
      <input [(ngModel)]="price" value="true" name="price" type="text" > 
      <label for="price">price</label> 
     </div> 
     <div class="input-field col s6"> 
      <input [(ngModel)]="quantity" value="true" name="quantity" type="text" > 
      <label for="quantity">quantity</label> 
     </div> 
     <div class="input-field col s6"> 
      <input [(ngModel)]="photoURL" value="true" name="photoURL" type="text" > 
      <label for="photoURL">photoURL</label> 

     </div> 
     <input type="text" placeholder="Full name" value="true" [(ngModel)]="namef" name="namef" class="txt" > 
     <input type="text" [(ngModel)]="keyProduct" name="keyProduct" value="true" > 
     <input type="text" [(ngModel)]="typeProduct" name="typeProduct" value="true" > 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat " >Update Product</button> 
    </div> 
    </form> 
     </div> 

     <div class="modal-footer"> 
     <div class="pull-left"> 
      <button class="btn btn-default" (click)="hide()"> Cancel </button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
    `, 
}) 
export class CommonModalComponent { 
    @ViewChild('childModal') public childModal:ModalDirective; 
    @Input() title?:string; 
    constructor() { 
    } 
    show(){ 
    this.childModal.show(); 
    } 
    hide(){ 
    this.childModal.hide(); 
    } 
    onSubmit(val){ 
    console.log(val); 
    } 
} 

LIVE DEMO