Fatal编程技术网
  • javascript/
  • Javascript 重复模式下数字和所需的文本框验证

Javascript 重复模式下数字和所需的文本框验证

javascript jquery angularjs

Javascript 重复模式下数字和所需的文本框验证,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,请参考下面的链接 它包含带有“添加”按钮的文本框。我已经为数字和必填字段添加了验证，工作正常。但当我点击add按钮时，它将创建另一个文本框，输入值显示所有文本框的验证消息，我不想显示所有文本框的验证消息。只需显示相应文本框的验证。这意味着当我在第二个文本框中输入错误时，它只向该文本框显示消息。请参阅下面的屏幕截图 为所有文本框显示验证消息。该消息应仅为一个文本框显示。工作plnkr: 您的问题在于HTML，要获取独立字段，您必须： 移动到ng重复的形式之外 在字段上使用$index提供一个

请参考下面的链接

它包含带有“添加”按钮的文本框。我已经为数字和必填字段添加了验证，工作正常。但当我点击add按钮时，它将创建另一个文本框，输入值显示所有文本框的验证消息，我不想显示所有文本框的验证消息。只需显示相应文本框的验证。这意味着当我在第二个文本框中输入错误时，它只向该文本框显示消息。请参阅下面的屏幕截图

为所有文本框显示验证消息。该消息应仅为一个文本框显示。

工作plnkr:

您的问题在于HTML，要获取独立字段，您必须：

  • 移动到ng重复的形式之外
  • 在字段上使用$index提供一个动态名称，因为名称使每个字段在验证中独立
以下是plnkr中的最后一个HTML，我在javascript中根本没有接触到：

<body ng-controller="MainCtrl">
     <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/>

   </form>
  </body>


NDC9
编号：
必修的！
无效号码！
value={{example.value}}

myForm['input{{$index}}].$valid={{{myForm['input}+$index].$valid}}

myForm['input{{$index}}].$error={{{myForm['input{$index}].$error}}}

删除
取消
添加
myForm.$valid={{myForm.$valid}}}

myForm.$error.required={{{！！myForm.$error.required}}}
工作plnkr：

您的问题在于HTML，要获取独立字段，您必须：

  • 移动到ng重复的形式之外
  • 在字段上使用$index提供一个动态名称，因为名称使每个字段在验证中独立
以下是plnkr中的最后一个HTML，我在javascript中根本没有接触到：

<body ng-controller="MainCtrl">
     <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/>

   </form>
  </body>


NDC9
编号：
必修的！
无效号码！
value={{example.value}}

myForm['input{{$index}}].$valid={{{myForm['input}+$index].$valid}}

myForm['input{{$index}}].$error={{{myForm['input{$index}].$error}}}

删除
取消
添加
myForm.$valid={{myForm.$valid}}}

myForm.$error.required={{{！！myForm.$error.required}}}
两个更改：

  • 如果将“track by$index”添加到ng repeat中，它将使每组元素都是唯一的，这样您就不必担心为元素派生唯一的名称

  • 您对数字（myForm.ndcValue.$error.number）的验证无效，因此我将其更改为myForm.ndcValue.$error.max | | myForm.ndcValue.$error.min

  • 此外，还可以使用ng repeat直接在div上抛出ng form属性

    • 像这样：

      <div ng-repeat="ndc in NDCarray track by $index" ng-form="myForm">
    <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="ndcValue" required>
      </label>
      <div role="alert">
       <span class="error" ng-show="myForm.ndcValue.$dirty && myForm.ndcValue.$error.required">
       Required!</span>
       <span class="error" ng-show="myForm.ndcValue.$error.max || myForm.ndcValue.$error.min">
       Not valid number!</span>
      </div>
      <tt>value = {{example.value}}</tt>
      <br/>
      <tt>myForm.ndcValue.$valid = {{myForm.ndcValue.$valid}}</tt>
      <br/>
      <tt>myForm.ndcValue.$error = {{myForm.ndcValue.$error}}</tt>
      <br/>

    </div>

    
NDC9
编号：
必修的！
无效号码！
value={{example.value}}

    
myForm.ndcValue.$valid={{myForm.ndcValue.$valid}

    
myForm.ndcValue.$error={{myForm.ndcValue.$error}
    这是工作表

    我将输入元素名称从“input”更改为“ndcValue”，以减少混淆。

    两个更改：

  • 如果将“track by$index”添加到ng repeat中，它将使每组元素都是唯一的，这样您就不必担心为元素派生唯一的名称

  • 您对数字（myForm.ndcValue.$error.number）的验证无效，因此我将其更改为myForm.ndcValue.$error.max | | myForm.ndcValue.$error.min

  • 此外，还可以使用ng repeat直接在div上抛出ng form属性

    • 像这样：

      <div ng-repeat="ndc in NDCarray track by $index" ng-form="myForm">
    <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="ndcValue" required>
      </label>
      <div role="alert">
       <span class="error" ng-show="myForm.ndcValue.$dirty && myForm.ndcValue.$error.required">
       Required!</span>
       <span class="error" ng-show="myForm.ndcValue.$error.max || myForm.ndcValue.$error.min">
       Not valid number!</span>
      </div>
      <tt>value = {{example.value}}</tt>
      <br/>
      <tt>myForm.ndcValue.$valid = {{myForm.ndcValue.$valid}}</tt>
      <br/>
      <tt>myForm.ndcValue.$error = {{myForm.ndcValue.$error}}</tt>
      <br/>

    </div>

    
NDC9
编号：
必修的！
无效号码！
value={{example.value}}

    
myForm.ndcValue.$valid={{myForm.ndcValue.$valid}

    
myForm.ndcValue.$error={{myForm.ndcValue.$error}
    这是工作表

    我将输入元素名称从“input”更改为“ndcValue”，以减少混淆。

    它没有显示必需和无效数字的验证消息。每次都必须将myForm.input更改为myForm['input\'+$index]，并且它正在工作。注意：您不会看到无效数字错误，因为该字段强制输入一个数字，但是您忘记处理
    min
    &
    max
    验证错误，它们将位于
    myForm['input\'+$index].$error.min
    &
    myForm['input\'+$index]下.$error.max
    它没有显示所需和无效号码的验证消息。必须每次将myForm.input更改为myForm['input\'+$index]，并且它正在工作。注意：您不会看到无效数字错误，因为该字段强制输入一个数字，但是您忘记处理
    min
    &
    max
    验证错误，它们将位于
    myForm['input\'+$index].$error.min
    &
    myForm['input\'+$index]下.$error.max
    它没有显示无效数字的验证消息。您的最小值为0，最大值为99，因此我只为超出该范围的任何内容设置验证。您还需要什么其他验证？当我键入除数字以外的字符时，它应该在您的plunker中显示“无效数字”，没有验证消息。即使是必填字段，您也可以将验证设置为您想要的任何内容，包括您最初拥有的内容（myForm.ndcValue.$error.number）。它不会显示无效数字的验证消息。您的最小值为0，最大值为99，因此我只为超出该范围的任何内容设置验证。你在寻找什么其他的验证？当我在numeri之外键入charcaters时