如何在时刻& Angularjs
我有一个包含jQuery Moment.js日期选择器的表格,我需要进行此字段,并禁用提交按钮,直到用户未选择日期时间为止。
但是,我遵循的方法无法正常工作。
这是我的代码 -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
我希望提交按钮保持禁用,直到我不为所有必需字段选择值。
I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach that I am following is not working.
Here is my code -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
I want submit button to remain disabled until I don't select values for all the required fields.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论