Angularjs 如何将$error.required与ng repeat一起使用？

我的结构如下：

// JS
$scope.fields = [
  { text: 'Email', type: 'text', value: '' },
  { text: 'Password', type: 'password', value: '' }
]

// HTML
<div class="user">
  <h2 class="header">Log in</h2>
  <form name="login">
    <input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" ng-repeat="field in fields" required />
    <a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
  </form>
</div>

---

也许我必须重新构造

ng repeat

？

试试下面的方法。你就快到了。只是错过了一个基本点，所有控件都需要名称。Angular使用名称进行验证

<div class="user">
  <h2 class="header">Log in</h2>
  <form name="login" novalidate="">
  <div ng-repeat="field in fields" >
        <input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" required name="{{field.name}}"/>
        <div ng-show="login.{{field.name}}.$invalid">
          <span class="help-block">Please enter</span>
        </div>
  </div>  
    <a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
  </form>


</div>

---

试试下面的方法。你就快到了。只是错过了一个基本点，所有控件都需要名称。Angular使用名称进行验证

<div class="user">
  <h2 class="header">Log in</h2>
  <form name="login" novalidate="">
  <div ng-repeat="field in fields" >
        <input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" required name="{{field.name}}"/>
        <div ng-show="login.{{field.name}}.$invalid">
          <span class="help-block">Please enter</span>
        </div>
  </div>  
    <a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
  </form>


</div>

---

在示例代码中，

myform.routingNumber.$error.required

myform

是表单的名称（html属性），而

routingNumber

是应该验证的输入元素的名称

那么像这样,

<form name="myform">
    <input name="routingNumber" ng-model="myRoute" />
    <div class="" ng-show="myform.routingNumber.$error.required">
      <span class="help-block">Please enter routing number</span>
    </div>
</form>

---

在示例代码中，

myform.routingNumber.$error.required

myform

是表单的名称（html属性），而

routingNumber

是应该验证的输入元素的名称

那么像这样,

<form name="myform">
    <input name="routingNumber" ng-model="myRoute" />
    <div class="" ng-show="myform.routingNumber.$error.required">
      <span class="help-block">Please enter routing number</span>
    </div>
</form>

---

尽管@Naga Sandeep已经回答了这个问题。我只是添加了另一个条件来包装错误消息，否则即使用户没有触摸表单，也会显示错误消息

<div ng-app="myApp", ng-controller="myCtrl">
  <form name="myForm" novalidate="">
    <div ng-repeat="info in loginInfo">
      <input type="{{info.type}}" ng-model="info.value" name="{{info.name}}" required novalidate>
      <span ng-show="myForm.{{info.name}}.$touched || myForm.$submitted">
        <span ng-show="myForm.{{info.name}}.$invalid">Please enter this field</span>
      </span>
    </div>
    <button type="submit">
    Login
    </button>
  </form>
</div>

angular.module("myApp", [])
.controller("myCtrl", myCtrl);

function myCtrl($scope){
    $scope.loginInfo = [
    {"name": "user_email", "value": "", "type":"email"},
    {"name": "user_pass", "value": "", "type":"password"}
  ]
}

请输入此字段
登录
angular.module（“myApp”，[]）
.controller（“myCtrl”，myCtrl）；
函数myCtrl（$scope）{
$scope.loginInfo=[
{“名称”：“用户\电子邮件”，“值”：“类型”：“电子邮件”}，
{“名称”：“用户密码”，“值”：“类型”：“密码”}
]
}

即使@Naga Sandeep已经回答了这个问题。我只是添加了另一个条件来包装错误消息，否则即使用户没有触摸表单，也会显示错误消息

<div ng-app="myApp", ng-controller="myCtrl">
  <form name="myForm" novalidate="">
    <div ng-repeat="info in loginInfo">
      <input type="{{info.type}}" ng-model="info.value" name="{{info.name}}" required novalidate>
      <span ng-show="myForm.{{info.name}}.$touched || myForm.$submitted">
        <span ng-show="myForm.{{info.name}}.$invalid">Please enter this field</span>
      </span>
    </div>
    <button type="submit">
    Login
    </button>
  </form>
</div>

angular.module("myApp", [])
.controller("myCtrl", myCtrl);

function myCtrl($scope){
    $scope.loginInfo = [
    {"name": "user_email", "value": "", "type":"email"},
    {"name": "user_pass", "value": "", "type":"password"}
  ]
}

请输入此字段
登录
angular.module（“myApp”，[]）
.controller（“myCtrl”，myCtrl）；
函数myCtrl（$scope）{
$scope.loginInfo=[
{“名称”：“用户\电子邮件”，“值”：“类型”：“电子邮件”}，
{“名称”：“用户密码”，“值”：“类型”：“密码”}
]
}

每个控件都需要一个

名称

。这就是

ngForm

用于创建验证对象的内容。错误显示的位置取决于您希望窗体具有的任何布局。还可以研究

ng消息

是如何实现这一点的。不难找到角度形式验证教程每个控件都需要一个

名称

。这就是

ngForm

用于创建验证对象的内容。错误显示的位置取决于您希望窗体具有的任何布局。还可以研究

ng消息

是如何实现这一点的。不难找到角度形式验证教程