在angularjs中，动态按钮创建正确，但验证不正确_Angularjs_Validation

在angularjs中，动态按钮创建正确，但验证不正确

angularjs validation

在angularjs中，动态按钮创建正确，但验证不正确,angularjs,validation,Angularjs,Validation,在“我的代码”中，按钮创建正确，但在键入第一行后，单击“添加字段”。关闭按钮在第一行被禁用。但我只想在当前键入行中禁用。其他关闭按钮处于启用状态 HTML 我清理了HTML中的一些问题，但主要问题是您需要仅对当前行执行验证。因此，您可以在ng repeat中添加ng form属性，以创建每行的作用域。生成的HTL如下所示： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/c

在“我的代码”中，按钮创建正确，但在键入第一行后，单击“添加字段”。关闭按钮在第一行被禁用。但我只想在当前键入行中禁用。其他关闭按钮处于启用状态

HTML

我清理了HTML中的一些问题，但主要问题是您需要仅对当前行执行验证。因此，您可以在ng repeat中添加ng form属性，以创建每行的作用域。生成的HTL如下所示：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js"></script>
</head>

<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
  <div class="form-group">
    <input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
  </div>
  <div class="form-group">
    <input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
  </div>
  <br>
  <fieldset data-ng-repeat="choice in choices track by $index" ng-form="formChoice">
    <br>
    <div class="form-group">
      <input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
    </div>
    <div class="form-group">
      <input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>

    </div>

    <div class="form-group">
      <input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/" placeholder="Category Item View Count" required>
      <p class="help-block" ng-show="formChoice.item_count.$error.pattern">numbers only allowed</p>
      <select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"></select>
    </div>

    <div class="form-group">
      <option value=''>Choose</option>
      City:
      <select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
        <option value="">Choose</option>
        <option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
      </select>
    </div>
    <button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!formChoice.item_name.$dirty||!formChoice.item_desc.$dirty||!formChoice.item_count.$dirty||!formChoice.state.$dirty||!formChoice.city.$dirty||formChoice.item_name.$invalid||formChoice.item_desc.$invalid">close</button>
  </fieldset>
  <br>
  <button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="frm.$invalid">Add fields</button>
  <button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.$invalid||frm.item_desc.$invalid ">Save</button>

  <span class="help-block" style="color:red" ng-show="frm.cat_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
  <span class="help-block" style="color:red" ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >  
  <span class="help-block" style="color:red" ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
  <span class="help-block" style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span >
  <div id="choicesDisplay">{{ newItemNo }}</div>
 </form>
</div>
</body>
</html>






仅允许数字
选择
城市：
选择
{{州.市}
关闭


添加字段
拯救
错误：
仅允许文本
错误：
仅允许文本
错误：
仅允许文本
错误：
仅允许文本
{{newItemNo}

我还想显示新项目noOk。这是个问题吗？如果是，请具体说明。

var app=angular.module('testApp', []);
  app.controller('MainCtrl', function($scope) {
  $scope.choices = [{id: 'choice1'}];





  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});

};

  $scope.removeChoice = function() {
    $scope.choices.splice(this.$index,1);
  };


     $scope.countries = {
         'Andhra': [{
             'id': '01',
             'city': "Guntur"
         }, {
             'id': '02',
             'city': "Hyderabad"
         }],
             'Tamilnadu': [{
             'id': '03',
             'city': "CBE"
         }, {
             'id': '04',
             'dep': "Trichy"
         }]
     };
});

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js"></script>
</head>

<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
  <div class="form-group">
    <input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
  </div>
  <div class="form-group">
    <input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
  </div>
  <br>
  <fieldset data-ng-repeat="choice in choices track by $index" ng-form="formChoice">
    <br>
    <div class="form-group">
      <input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
    </div>
    <div class="form-group">
      <input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>

    </div>

    <div class="form-group">
      <input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/" placeholder="Category Item View Count" required>
      <p class="help-block" ng-show="formChoice.item_count.$error.pattern">numbers only allowed</p>
      <select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"></select>
    </div>

    <div class="form-group">
      <option value=''>Choose</option>
      City:
      <select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
        <option value="">Choose</option>
        <option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
      </select>
    </div>
    <button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!formChoice.item_name.$dirty||!formChoice.item_desc.$dirty||!formChoice.item_count.$dirty||!formChoice.state.$dirty||!formChoice.city.$dirty||formChoice.item_name.$invalid||formChoice.item_desc.$invalid">close</button>
  </fieldset>
  <br>
  <button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="frm.$invalid">Add fields</button>
  <button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.$invalid||frm.item_desc.$invalid ">Save</button>

  <span class="help-block" style="color:red" ng-show="frm.cat_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
  <span class="help-block" style="color:red" ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >  
  <span class="help-block" style="color:red" ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
  <span class="help-block" style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span >
  <div id="choicesDisplay">{{ newItemNo }}</div>
 </form>
</div>
</body>
</html>