Question

我在表单上有一个取消按钮。当用户点击“取消”按钮时，我有三种情况。

如果用户在任何字段中输入了值，并且未保存，则单击取消按钮我正在发出警告＆＃34;所有数据都将丢失＆＃34;并将其重定向到主页
如果用户未在表单字段中输入任何值并点击取消，则我不想显示消息＆＃34;所有数据都将丢失＆＃34;。这将是一个不同的消息，并将其重定向到家，因为他没有输入任何信息，所以我想显示不同的消息。
保存表单后，现在我们处于编辑模式而不更改任何表单现有值如何实现第二个场景，没有值如果用户点击取消，则更改不要显示该消息＆＃34;所有数据都将丢失＆＃34;。

如果没有输入任何值，如何检查第二个方案表单字段和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>

ctrl.js

$scope.handleCancel = function () {
    if($rootScope.status !== 'view') {
        $scope.messageText = $rootScope.alertMessages['common.cancelConfirmMessage'];
        $scope.confirmationWin.open().center();
        $scope.yesCallback = $scope.cancelPRT;
    } else { $scope.redirectToProcessScreen(); }
};

Answer 1

您可以使用 $ 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(); }
};

如何在取消按钮上检查AngularJs表单字段？

1 个答案: