2017-09-24 7 views
2

私は現在、アングル4プロジェクトでブートストラップ日付ピッカーを使用しています。角4:提出時にフォームモデルオブジェクトに日付値が含まれていません

私は日付ピッカーから日付を選択し、フォームを送信すると、日付値のみがモデルオブジェクトに付属していません、それは未定義

として来る私は自分のフォームのコードを追加し、下記のtypescriptコード、私に教えてください、私のコードの問題です。

<form name="details-form" #myform="ngForm" (ngSubmit)="getData(myform)" > 
    <h4 class="message-heading">Establish new Opportunity</h4>  
    <div class="input-eta"> 
    <div class="input-label">the ETA?</div> 
    <div class="datepicker-box " data-provide="datepicker" data-date-autoclose="true"> 
     <span class="icons icon-calendar input-group-addon"></span>   
    **<input type="date" placeholder="mm-dd-yyyy" name="datepicker" 
         id="datepicker" 
         [(ngModel)]="sModel.datepicker" 
         #datepicker="ngModel" />** 
    </div> 
    <div class="input-other-details"> 
    <div class="input-label">Other details</div> 
    <textarea placeholder="Type here" name="otherdetails" [(ngModel)]="sModel.otherdetails" #otherdetails="ngModel" ></textarea> 
    </div> 
    <div class="buttons-row"> 
    <a href="javascript:;" class="btn btn-border btn-cancel" data-dismiss="modal">Cancel</a> 
    <button type="submit" [disabled]="!focusForm.form.valid" class="btn btn-primary btn-submit">Submit</button>   
    </div> 
</form> 

export class myValueComponent implements OnInit{ 
**sModel:any = {};** 
    constructor(){} 

    **getData(modalData){ 
    console.log("modalData",modalData.value); 
    return false; 
    }** 

    ngAfterViewInit(){  

    } 
} 

答えて

0

私はあなたがすべてのブートストラップの行動(JavaScriptの)コンポーネントのNGX-ブートストラップパッケージを使用することをお勧め。 datepickerコンポーネントへの簡単なリンクとその実装方法:https://valor-software.com/ngx-bootstrap/#/datepicker

関連する問題