Question

我有一个表单，我正在尝试验证。我想验证所有文本字段是否包含一些文本。我在ng-repeat中添加的数组可能会有所不同。如果表单正确，则必须启用该按钮。如果不正确，必须禁用它。

我该怎么做？

<body ng-controller="Channels">
  <div ng-repeat="item in aCandidatos">
      <input type='text' ng-model="item.votos" required>
  </div>
  <button ng-disabled="!item.votos">
   send
  </button> 
</body>

[
  { "nombre": "Candidato","votos":""},
  { "nombre": "Candidato2","votos":""}
];

http://jsfiddle.net/vnq7g4q3/

Answer 1

您可以使用AngularJS表单上的$invalid标记来检查HTML5基本验证（例如某些/任何数据存在）。在下面的示例中，验证基于Form和required属性周围的布线进行：

<body ng-controller="Channels">
  <form name="votosForm" novalidate>
    <div ng-repeat="item in aCandidatos">
      <input type='text' ng-model="item.votos" required>
    </div>
    <button ng-disabled="votosForm.$invalid">
     send
    </button>
  </form>
</body>

请注意，我不必对Angular Controller进行任何相应的更改。

Answer 2

使用此方法：

基本上，函数invalidVotes会检查一些空投票。

function Channels($scope) {
   $scope.aCandidatos=
    [
      { "nombre": "Candidato","votos":""},
      { "nombre": "Candidato2","votos":""}
    ];

    $scope.invalidVotes = function() {
      return Object.values($scope.aCandidatos).some(c => !c.votos || c.votos.trim() === '');
    }
}

＆＃13;

function Channels($scope) {
  $scope.aCandidatos = [{
      "nombre": "Candidato",
      "votos": ""
    },
    {
      "nombre": "Candidato2",
      "votos": ""
    }
  ];

  $scope.invalidVotes = function() {
    return Object.values($scope.aCandidatos).some(c => !c.votos || c.votos.trim() === '');
  }
}

angular.module('app', [])
  .controller('Channels', Channels);

angular.bootstrap(document.body, ['app']);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-controller="Channels">
  <div ng-repeat="item in aCandidatos">
    <input type='text' ng-model="item.votos" required>
  </div>
  <button ng-disabled="invalidVotes()">
     send
    </button>
</div>

＆＃13;

Answer 3

这将有效：

 <body ng-controller="Channels">
    <div ng-repeat="item in aCandidatos">
        <input type='text' ng-model="item.votos" required>
    </div>
    <button ng-disabled="isDisabled()">
     send
    </button> 
  </body>

function Channels($scope) {
   $scope.aCandidatos=
      [
        { "nombre": "Candidato","votos":""},
        { "nombre": "Candidato2","votos":""}

      ];
    $scope.isDisabled=()=>{
            let isDisabled=(($scope.aCandidatos.filter((item)=>item.votos=="")).length!=0)?true:false
            return isDisabled;
    }
}

angular.module('app', [])
  .controller('Channels', Channels);

angular.bootstrap(document.body, ['app']);

Answer 4

我建议使用AngularJS的内置表单验证而不是HTML5。处理重复字段<section ng-controller="Channels"> <form name="candidatesForm" novalidate> <ng-form ng-repeat="user in aCandidatos" name="voteForm"> <label>{{ user.nombre }}s Votos</label> <input type="text" class="form-control" name="votos" ng-model="user.votos" required> <p class="help-block text-danger" ng-show="voteForm.votos.$invalid">Votos is required.</p> </ng-form> <button type="submit" ng-disabled="candidatesForm.$invalid">Send</button> </form> </section>是完美的，允许您隔离范围并在适当的地方提供单独的验证消息。如果您愿意，这也可以让您使用单个提交按钮，允许用户一次提交所有投票而不是一个一个。

novalidate

以下是我在此处添加的具体更改以及原因的一些其他详细信息：

<ng-form>禁用了默认的HTML5处理验证
为表单命名，为我们提供了AngularJS在$ scope上的内置表单验证
type="submit"让我们为每个重复的表单创建独立的范围，让我们单独验证它们
向按钮添加{{1}}将触发正确的表单提交

如何启用/禁用按钮以验证存在ng-repeat的表单？

4 个答案: