我试图解决这个问题一段时间但没有运气。我整个下午都在阅读 this 或 this 等关于 ng-repeat 内部验证的示例，但我找不到任何可以向我解释我的代码不起作用的原因。
我在 ng-repeat 中有包含字段的表单，所有这些字段都使用必需的参数。
当我触发更新按钮时，验证不起作用。如果我在没有 ng-repeat 的情况下使用相同的表单，则验证弹出窗口会正常显示（如果某些内容与输入条件不匹配）。我用过这段代码：
ng-click="contactForm.$valid && updateContact(contact)"
上面的代码似乎对带有 ng-repeat 的表单没有影响。 如果可能的话，我想获得 HTML 5 验证pop-up:
当我按下更新按钮时，在空的字段上（或者如果正则表达式与输入不匹配）。我不想让字段显示为必填项或禁用更新按钮，因为某些字段不正确。
【问题讨论】：
标签： angularjs html validation required
从<div> 中删除ng-form="contactForm" 并将ng-repeat="con in contact" 包裹在<form name="contactForm"></form> 元素中。
对于您的更新按钮，您可能需要添加ng-disabled="contactForm.$invalid"。
【讨论】：
name 属性；）
正如 Mikko 所说 + 为每个输入添加“名称”属性：
https://plnkr.co/edit/oVfvkoXgltebHQTyelev?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div ng-init=" editContact(); getAllCities(); getAllCountries();" class="container">
<div class="btn-group btn-group-justified">
<div class="pull-left">
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-click="goContacts()">Contacts</button>
</div>
</div>
</div>
<div></div>
<form name="contactForm">
<div ng-repeat="con in contact">
<div ng-if="$index == 0">
<div hidden>
<input type="text" placeholder="First name" name="firstname" ng-model="con.id" required>
</div>
<div>
<label class="lbl"><b>First name</b></label>
</div>
<div>
<input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required>
</div>
<div>
<label class="lbl"><b>Last name</b></label>
</div>
<div>
<input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required>
</div>
<div>
<label class="lbl"><b>Phone</b></label>
</div>
<div>
<input type="text" placeholder="Phone" name="phone" ng-model="con.phone" required>
</div>
<div>
<label class="lbl"><b>Email</b></label>
</div>
<div>
<input type="text" placeholder="Email" name="email" ng-model="con.email" required>
</div>
</div>
<div ng-if="$index == 1">
<div>
<label class="lbl"><b>Street name</b></label>
</div>
<div>
<input type="text" placeholder="Street name" name="streetname" ng-model="con.street" required>
</div>
<div>
<label class="lbl"><b>Street number</b></label>
</div>
<div>
<input type="text" placeholder="Street number" name="streetnumber" ng-model="con.street_no" required>
</div>
</div>
<div ng-if="$index == 2">
<div>
<label class="lbl"><b>City id </b></label>
</div>
<div>
<input type="text" placeholder="City id" name="cityd" ng-model="con.id" required>
</div>
<div>
<label class="lbl"><b>Zip code</b></label>
</div>
<div>
<input type="text" placeholder="Street number" name="citystreet" ng-model="con.zip_code" required>
</div>
</div>
</div>
<div class="container1">
<label class="lbl"><b>Select city</b></label>
<select id="City" name="City" class="form-control" ng-model="selectedValue1">
<option ng-repeat="city in chooseCities" value="{{city.id}} ">
{{city.name}}
</option>
</select>
</div>
<div class="container1">
<label class="lbl"><b>Select country</b></label>
<select id="Country" name="Country" class="form-control" ng-model="selectedValue2">
<option ng-repeat="country in chooseCountries" value="{{country.id}}">
{{country.name}}
</option>
</select>
</div>
</form>
</div>
<div class="container1" style="background-color:rgb(241, 241, 241)">
<button type="submit" class=" colorbtn cancelbtn colorbtn" ng-disable="!contactForm.$valid" ng-disabled="!contactForm.$valid" ng-click="updateContact(contact)">Update Contact</button>
<button type="button" class="cancelbtn" ng-click="deleteContact(contact)">Delete Contact</button>
</div>
</body>
</html>
如果你想在一个空输入旁边显示一条消息
<div>
<input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required>
<span ng-show="contactForm.firstname.$dirty && contactForm.firstname.$error.required" class="help-block">first name required</span>
</div>
<div>
<label class="lbl"><b>Last name</b></label>
</div>
<div>
<input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required>
<span ng-show="contactForm.lastname.$dirty && contactForm.lastname.$error.required" class="help-block">last name required</span>
</div>
【讨论】：