【问题标题】:Disable the button based on control validation which inside ng-repeat angularjs根据 ng-repeat angularjs 内部的控件验证禁用按钮
【发布时间】:2016-08-03 10:35:50
【问题描述】:

plunkr 链接

https://plnkr.co/edit/vuktW1bWSNIoV43Qp8DC?p=preview

 <form name="myForm">
    <div ng-repeat ="ndc in NDCarray">
    <div class="col-sm-4 type7" style="font-size:14px;">
        <div style="margin-bottom:5px;">NDC9</div>

  <label>Number:
    <input type="number"  ng-model="ndc.value"
           min="0" max="99" name="{{'input_'+$index}}" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>

    </div>
    <div class="col-sm-4 type7 " style="font-size:14px;">
        <div style="padding-top:20px; display:block"> 
            <span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span> &nbsp; 
            <span>Cancel </span> &nbsp;  
            <span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
        </div>
    </div>
  </div>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 <button>Save</button>
   </form>

我们可以输入数字中的值并单击添加,它将创建具有相同选项(删除、取消、添加)的新文本框。该文本框有一些验证

  1. 必填
  2. 最小和最大范围 如果我通过单击添加动态创建 4 个文本框并更改任何文本框的值导致验证失败意味着,我想禁用 ng-repeat 之外的保存按钮。

如果任何文本框验证失败需要禁用保存按钮。

【问题讨论】:

    标签: javascript jquery html angularjs


    【解决方案1】:

    您可以尝试以下方法吗:

    <button ng-disabled="!myForm.$valid">Save</button>
    

    据我了解您的问题,这就是您想要实现的目标?

    【讨论】:

      猜你喜欢
      • 2016-12-03
      • 2016-02-12
      • 2016-04-22
      • 1970-01-01
      • 2013-08-11
      • 2022-11-11
      • 1970-01-01
      • 2013-06-02
      • 1970-01-01
      相关资源
      最近更新 更多