Question

我目前在angular 4项目中使用bootstrap日期选择器。

当我从日期选择器中选择日期并提交表单时，日期值不会出现在模型对象中，它会以未定义

我在下面添加了我的表单代码和打字稿代码，请告诉我，我的代码有什么问题。

<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(){       

  }
}

Answer 1

我建议你对所有Bootstrap行为（JavaScript）组件使用ngx-bootstrap包。这是指向datepicker组件的快速链接以及如何实现它：https://valor-software.com/ngx-bootstrap/#/datepicker

Angular 4：表单模型对象在提交时不包含日期值

1 个答案: