如果输入字段错误,如何禁用该按钮

时间:2015-12-16 11:06:32

标签: javascript html angularjs

<td>
  <div>
    <ng-form name="mrpForm">
        <input type="number" min="1" name="mrp" step="any" ng-model="sku.mrp" style="width:80px;" / required>
        <span style="color:red;" ng-if="(mrpForm.mrp.$error.min)">Must be greater than zero</span>
    </ng-form>
  </div>
</td>
<td>
  <ng-form name="packQtyform">
    <input type="number" name="skupackQty" min="2" max="100" ng-model="sku.packQty" style="width:100px;" />
    <span style="color:red;" ng-if="(packQtyform.skupackQty.$error.min)">Must be greater than 1</span>
    <span style="color:red;" ng-if="(packQtyform.skupackQty.$error.max)">Maximum 100</span>
  </ng-form>
</td>
<td>
  <button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp"
ng-click="addsku(sku);>Save</button>
</td>

在上面的代码中,我想只在sku.packQty值是一个错误并且如果sku.mrp为空,sku.packQty可以为空但是它不应该是错误的情况下使保存按钮禁用如果错误消息保存按钮必须禁用。

2 个答案:

答案 0 :(得分:0)

我会创建一个像:

这样的函数
$scope.valid_form() {
  //here are all the terms, return false if something is wrong
  return true;
}

然后,在我的html按钮中,我只会说:

ng-disabled="!valid_form()"

答案 1 :(得分:0)

您可以使用form-name.$invalid

<button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp || mrpForm.$invalid || packQtyform.$invalid"
ng-click="addsku(sku);>Save</button>

我无法理解验证条件,但$invalid会这样做。