javascript - 如何验证 Angular js中的字段(非空白)

Question

我有多个输入字段，我想验证我的字段。当用户点击提交按钮时，它们不能为空。如果字段为空，当用户单击按钮时，我将如何显示红色边框。

这是我的代码 http://plnkr.co/edit/XtnSdO9ARpHdn9RZotMt?p=info

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [
    {
      name:'abc'
    },
    {
      name:'pqr'
    }
    ];

    $scope.onclick =function(){

      console.log($scope.c)
    }

});

Answer 1

首先，您需要将所有输入字段放在表单标签内。像这样:

<form ng-submit="onclick()">
  <button type="submit">submit</button>
  <li ng-repeat="x in c">
    <input type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}" required="true"/>
   </li>
</form>

对于输入，您需要设置属性 required="true"(或者 Angular 的 ng-required，如果您需要条件值)。 Sumbit 按钮需要有 type="submit"(这样他就会触发表单提交)。提交功能需要从按钮单击移动到表单的属性 ng-submit="onclick()"。

此示例已经可以使用 native html5 验证消息。如果您想添加自定义样式，无效的输入将具有 css 类('ng-invalid')。