アプリで pikaday.js を使用するカスタム ディレクティブを作成しました。私はすべてを設定し、ほとんどやりたいことをやっていますが、検証に大きな問題があります。
私のディレクティブでは、モデルとビューの両方の値を正しく更新できますが、入力名に関連付けられた $required プロパティは変更されません。
これが私のディレクティブコードです:
appShared.directive('pikadayDatepicker', [function () {
return {
restrict: 'A',
scope:{
ngModel: '='
},
link: function (scope, element, attrs) {
var input = element[0];
var updateFieldFunction = function (date) {
scope.ngModel = date;
scope.$apply();
};
var picker = new Pikaday({
field: input,
defaultDate: new Date(),
setDefaultDate: true,
onSelect: updateFieldFunction,
minDate: moment(attrs.minDate, "DD/MM/YYYY hh:mm:ss").toDate(),
format: attrs.format
});
}
}
}
]);
そして、これがテンプレートでディレクティブを呼び出す方法です。
<form name="newForm" class="ng-invalid ng-invalid-required ng-dirty ng-valid-editable" novalidate="">
<div class="form-group">
<label for="Destinazione">Destinazione</label>
<br>
<input class="form-control ng-dirty ng-valid-required ng-valid ng-valid-editable" data-ng-class="{has_error: newForm.id.$invalid && newForm.id.$dirty }" required="true" data-typeahead-min-length="3" data-typeahead-editable="false" data-typeahead="dest as dest.Label for dest in iddestinations('/api/GetDestinations/?term=', 'HTL', $viewValue)" placeholder="Inserisci una destinazione..." autocomplete="off" name="id" data-ng-model="iddestination" type="text">
<div class="help-block ng-hide" data-ng-show="newForm.id.$invalid && newForm.id.$dirty">
<span class="help-block ng-hide" data-ng-show="newForm.id.$error.required">Inserisci una destinazione!</span>
<span class="help-block ng-hide" data-ng-show="newForm.id.$error.editable">Inserisci una destinazione tra quelle disponibili!</span>
</div>
</div>
<div class="form-group">
<label for="Data_partenza">Data partenza</label>
<br>
<div class="input-group date">
<input class="form-control ng-isolate-scope ng-scope ng-pristine ng-invalid ng-invalid-required" data-ng-class="{has_error: newForm.beginDate.$invalid && newForm.beginDate.$dirty}" required="required" data-pikaday-datepicker="" data-min-date="05/11/2013 00:00:00" data-format="DD/MM/YYYY" name="beginDate" data-ng-model="params.beginDate" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-toggle="datepicker">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div class="help-block">
<span class="help-block" data-ng-show="newForm.beginDate.$error.required">Inserisci una data valida!</span>
<h5 class="ng-binding">"2013-11-27T23:00:00.000Z"</h5>
</div>
</div>
<div class="clearfix">
<a disabled="disabled" class="btn btn-primary pull-right" data-ng-disabled="newForm.$invalid" data-ng-click="SendParams()">Continua</a>
</div>
</form>
この問題の原因を知っていますか? どうすれば修正できますか?