如何在 Angular js 中动态启用/禁用验证答案

【问题标题】：How to enable/disable validations dynamically in angular js如何在 Angular js 中动态启用/禁用验证
【发布时间】：2016-04-04 14:40:31
【问题描述】：

我的表单有两个按钮，分别是“草稿”和“提交”，因此对于草稿，一些验证适用，提交按钮也是如此。我有一个变量 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"）。有没有其他方法可以做到这一点？

【问题讨论】：

这个问题我不清楚。请问可以改写吗？
@jeff-diederiks 我有两个用于单个表单的按钮，我希望当用户单击一个按钮时，某些验证适用，而当用户单击另一个按钮时，其他验证适用。例如我有两个输入字段，分别是标题和说明，因此当用户单击按钮 1 时，标题应该是强制性的，当用户单击按钮 2 时，两个输入字段都应该是强制性的。

标签： angularjs forms validation

【解决方案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" />

【讨论】：

感谢您的建议将考虑单选按钮。

【解决方案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 调用的函数，一个用于每个按钮，或者您可以指定何时禁用一个，何时启用另一个。

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

【讨论】：