Question

我的表单有两个按钮，表示“草稿”和“提交”，因此对于草稿，某些验证适用，提交按钮也相同。我有一个变量cmpnStatus，它用值1初始化。对于cpmnStatus的草稿值是0，对于提交它是1.

<div class="form-group">                
            <label>Short Description<span class="red-ast">*</span></label><br/>
            <textarea ng-model="shortdesc" ng-change="shortchange(shortdesc)" class="form-control b-rad3" ng-required="cmpnStatus == 0"></textarea>     
    </div>

<button type="submit" ng-click="campform.$valid && submitDraft(campform)" class="btn btn-draft">Save as draft</button>            
<button type="submit" class="btn btn-launch" ng-click="campform.$valid && submitCampaign()">Submit for Approval</button>

以下是submitDraft函数的代码。

$scope.submitDraft = function(form){
        $scope.cmpnStatus = 0;
        if(form.$valid) {
           alert("valid");
        } else {
           alert("invalid");
        }
        //Then call to save data in db
};

我的问题是，当我点击草稿表单显示有效并在db中保存数据之后，它指出了所需的验证，因为cpmnStatus的初始值为1并且根据条件要求验证条件失败。再次点击草稿按钮现在需要验证工作正常，因为cpmnStatus的值从1变为0.我希望当用户点击草稿按钮时，当cpmnStatus的值发生变化时，它应该显示我需要的验证（即使在第一次点击）根据条件（ng-required =“cmpnStatus == 0”）。有没有其他方法可以做同样的事情？

Answer 1

首先将html更改为：

<button type="submit" ng-disabled="campform.$error" ng-click="submitDraft(campform)" class="btn btn-draft">Save as draft</button>            
<button type="submit" class="btn btn-launch" ng-disabled="campform.$error" ng-click="submitCampaign()">Submit for Approval</button>

当表单无效时禁用用户按钮更好。

关于cmpnStatusThings我建议您使用复选框或单选按钮在草稿或审批模式之间切换：

<input type="checkbox" ng-model="cmpnStatus" ng-true-value="1" ng-false-value="0"/>

广播样本：

<input type="radio" ng-model="cmpnStatus" ng-value="1"/>
<input type="radio" ng-model="cmpnStatus" ng-value="0" />

Answer 2

感谢您的澄清。这是我目前正在使用的功能：

$scope.checkIfSaveAllowed = function() {
  var timer = setTimeout(function() {
    var validControls = document.getElementsByClassName('has-feedback ng-scope has-success');
    var modalSaveBtn = document.getElementById('eventModalSaveBtn');
    if (validControls.length >= 3) {
      if (validControls.length == 4) {
        modalSaveBtn.disabled = false;
      }
      else if (validControls[0].id != "commentFormGroup" && validControls[1].id != "commentFormGroup" && validControls[2].id != "commentFormGroup") {
        modalSaveBtn.disabled = false;
      }
    }
    else {
      modalSaveBtn.disabled = true;
    }
  }, 50);
}

我使用ng-change在表单中的每个字段上调用此函数。中间的else if就是我如何完成你所要求的。我的代码中不需要commentFormGroup。我检查（1）是否只有三个有效字段和（2）这些有效字段都不是可选字段，然后应该启用该按钮。

在你的情况下，你可以有两个由ng-change调用的函数，每个按钮一个，或者你可以指定何时应该禁用一个，另一个启用。

或者，您可以显示自定义错误消息，而不是禁用该按钮。我希望这会有所帮助。

如何在角度js

2 个答案: