javascript - 如何检查取消按钮上的 AngularJs 表单字段？

Question

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

1. 如果用户在任何字段中输入了值，但没有保存，点击了取消按钮，我会警告“所有数据都将丢失”并将其重定向到主页

2. 如果用户未在表单字段中输入任何值并单击取消我不想显示消息“所有数据都将丢失”。这将是一个不同的消息并将其重定向到主页，因为他没有输入任何信息，所以我想显示一个不同的消息。

3. 保存表单后，现在我们处于编辑模式，无需更改任何内容现有值如何实现第二种情况，没有值(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(); }
};

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(); }
};