我在表单上有一个取消按钮。当用户单击“取消”按钮时,我会遇到三种情况。
如果用户在任何字段中输入了值,但没有保存,点击了取消按钮,我会警告“所有数据都将丢失”并将其重定向到主页
如果用户未在表单字段中输入任何值并单击取消我不想显示消息“所有数据都将丢失”。这将是一个不同的消息并将其重定向到主页,因为他没有输入任何信息,所以我想显示一个不同的消息。
保存表单后,现在我们处于编辑模式,无需更改任何内容 现有值如何实现第二种情况,没有值(value) 如果用户单击取消不想显示消息,则更改 “所有数据都将丢失”。
如果没有输入任何值,如何检查第二种情况 表单字段和 handleCancel 显示不同的消息?
如果现有值未更改,如何在编辑模式下检查第三种情况,然后单击取消行为应该类似于第二种情况?
main.html
<div class="col-md-8">
<input type="text" class="form-control" id="processOwnerRes"
ng-model="challengesDTO.challengeResponseWrk"
name="processOwnerRes" readonly="readonly" >
</div>
<div class="panel-footer">
<button class="btn btn-default" type="button" ng-click="handleCancel()">Cancel</button>
<div class="pull-right">
<button class="btn btn-primary"
ng-disabled="processChallengeForm.$invalid"
ng-class="{disableSaveCls:processChallengeForm.$invalid}"
ng-click="submit()" >Save
</button>
</div>
</div>
控制键
$scope.handleCancel = function () {
if($rootScope.status !== 'view') {
$scope.messageText = $rootScope.alertMessages['common.cancelConfirmMessage'];
$scope.confirmationWin.open().center();
$scope.yesCallback = $scope.cancelPRT;
} else { $scope.redirectToProcessScreen(); }
};
最佳答案
您可以使用属性 $pristine 或 $dirty 来检查用户是否已经与表单交互。
https://docs.angularjs.org/api/ng/type/form.FormController
像这样:
$scope.handleCancel = function () {
if($rootScope.status !== 'view') {
if($scope.processChallengeForm.$dirty){
$scope.messageText = $rootScope.alertMessages['common.cancelConfirmMessage'];
$scope.confirmationWin.open().center();
$scope.yesCallback = $scope.cancelPRT;
}
} else { $scope.redirectToProcessScreen(); }
};
关于javascript - 如何检查取消按钮上的 AngularJs 表单字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32592628/