0
我想將datetimepicker集成到我的Angular表單驗證。目前爲止一切正常，但它似乎沒有響應點擊按鈕來調出日曆。我在這裏按照例子：http://mgcrea.github.io/angular-strap/。這裏是我的代碼，最相關的部分是在這裏：Angularjs和引導datetimepicker
<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
<label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
<div class="controls">
<input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
</div>
</div>
而且整個頁面看起來是這樣的：
<h2>Add User</h2>
<form name="form" id="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.UserName.$invalid}">
<label class="control-label" for="UserName">{{'_UserName_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.UserName" id="UserName" name="UserName" title="UserName" required ng-minlength="6" ng-maxlength="20" ng-unique="main.Users.Username" />
<span ng-show="form.UserName.$dirty && form.UserName.$error.required">{{'_UserNameRequired_' | i18n}}</span>
<span ng-show="form.UserName.$dirty && form.UserName.$error.minlength">{{'_UserNameLength_' | i18n}}</span>
<span ng-show="form.UserName.$dirty && form.UserName.$error.maxlength">{{'_UserNameLength_' | i18n}}</span>
<span ng-show="form.UserName.$dirty && form.UserName.$error.uniqueusername">{{'_UserNameUnique_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.FirstName.$invalid}">
<label class="control-label" for="FirstName">{{'_FirstName_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.FirstName" id="FirstName" name="FirstName" title="FirstName" required ng-minlength="1" ng-maxlength="50" />
<span ng-show="form.FirstName.$dirty && form.FirstName.$error.required">{{'_FirstNameRequired_' | i18n}}</span>
<span ng-show="form.FirstName.$dirty && form.FirstName.$error.minlength">{{'_FirstNameLength_' | i18n}}</span>
<span ng-show="form.FirstName.$dirty && form.FirstName.$error.maxlength">{{'_FirstNameLength_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.Surname.$invalid}">
<label class="control-label" for="FirstName">{{'_Surname_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.Surname" id="Surname" name="Surname" title="Surname" required ng-minlength="1" ng-maxlength="50" />
<span ng-show="form.Surname.$dirty && form.Surname.$error.required">{{'_SurnameRequired_' | i18n}}</span>
<span ng-show="form.Surname.$dirty && form.Surname.$error.minlength">{{'_SurnameLength_' | i18n}}</span>
<span ng-show="form.Surname.$dirty && form.Surname.$error.maxlength">{{'_SurnameLength_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.Password.$invalid}">
<label class="control-label" for="Password">{{'_Password_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.Password" id="Password" name="Password" title="Password" required ng-pattern="/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/" />
<span ng-show="form.Password.$dirty && form.Password.$error.required">{{'_PasswordRequired_' | i18n}}</span>
<span ng-show="form.Password.$dirty && form.Password.$error.pattern">{{'_PasswordLengthAndAlphanumeric_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.ConfirmPassword.$invalid}">
<label class="control-label" for="ConfirmPassword">{{'_ConfirmPassword_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.ConfirmPassword" id="ConfirmPassword" name="ConfirmPassword" title="ConfirmPassword" required ng-pattern="/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/" match-password="Password" />
<span ng-show="form.ConfirmPassword.$dirty && form.ConfirmPassword.$error.required">{{'_ConfirmPasswordRequired_' | i18n}}</span>
<span ng-show="form.ConfirmPassword.$dirty && form.ConfirmPassword.$error.pattern">{{'_PasswordLengthAndAlphanumeric_' | i18n}}</span>
<span ng-show="form.ConfirmPassword.$dirty && !form.ConfirmPassword.$error.pattern && !form.ConfirmPassword.$error.required
&& form.ConfirmPassword.$error.passwordmatch">{{'_PasswordsMustMatch_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.EmailAddress.$invalid}">
<label class="control-label" for="EmailAddress">{{'_EmailAddress_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.EmailAddress" id="EmailAddress" name="EmailAddress" title="EmailAddress" required ng-pattern="/^(?!.{51})([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$/" ng-unique="main.Users.EmailAddress" />
<span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.required">{{'_EmailAddressRequired_' | i18n}}</span>
<span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.pattern">{{'_EmailAddressInvalid_' | i18n}}</span>
<span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.uniqueemailaddress">{{'_EmailAddressUnique_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
<label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
<div class="controls">
<input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.City.$invalid}">
<label class="control-label" for="City">{{'_City_' | i18n}}</label>
<div class="controls">
<input type="text" ng-model="user.City" id="City" name="City" title="City" required ng-maxlength="50" />
<span ng-show="form.City.$dirty && form.City.$error.maxlength">{{'_CityLength_' | i18n}}</span>
</div>
</div>
<div class="form-actions">
<button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">Add</button>
<a href="#/" class="btn">Cancel</a>
</div>
</form>
<script src="../../../Scripts/jquery-1.8.2.js"></script>
<script src="../../../Scripts/jquery-ui-1.8.20.js"></script>
<script src="../../../Scripts/angular-strap.min.js"></script>
<script src="../../../Scripts/bootstrap-datepicker.js"></script>
<link href="../../../Content/bootstrap-datepicker.css" rel="stylesheet" />
我需要的東西添加到我的app.js？目前我唯一有此相關的DateTimePicker：
//You can use the global $strapConfig to set defaults
app.value('$strapConfig', {
datepicker: {
language: 'fr',
format: 'M d, yyyy'
}
});
編輯：這個問題是在jQuery大師的建議，我需要注入angularstrap指令到我app.js.它現在有效，但驗證不起作用，因爲它應該。當我點擊日曆中的某個日期時，它確實有效，但是當我手動輸入數據時，它無法正確驗證。例如，輸入文本仍然會提供所需的驗證消息，並且根本沒有模式驗證。
<
div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
<label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
<div class="controls">
<input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required ng-pattern="/^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/">
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>
</div>
</div>
由於添加的參考，這是我錯過了什麼，我想通它在你的帖子前不久。我遇到的另一個問題是驗證不能像它應該那樣工作（請參閱上面的編輯）。如果你有任何想法，那就太棒了。 – user517406