我试图解决这个问题一段时间但没有运气。我正在阅读整个下午的例子,如this或this关于ng-repeat中的验证,但我找不到任何可以解释我的代码无效的原因。
我的表格包含ng-repeat中的字段,所有这些字段都使用必需的参数。
当我触发更新按钮时,验证无效。如果我有没有 ng-repeat 的相同表单,则验证弹出窗口会正常显示(如果某些内容与输入条件不匹配)。我使用过这段代码:
ng-click="contactForm.$valid && updateContact(contact)"
上面的代码似乎对使用ng-repeat的表单没有影响。 如果可能,我想获得HTML 5验证pop-up:
当我按下更新按钮时,在空的字段上(或者如果正则表达式与输入不匹配)。我不想让字段说明需要或禁用更新按钮,因为某些字段不正确。
答案 0 :(得分:1)
从ng-form="contactForm"
删除<div>
并将ng-repeat="con in contact"
包裹在<form name="contactForm"></form>
元素中。
对于您的更新按钮,您可能想要添加ng-disabled="contactForm.$invalid"
。
答案 1 :(得分:1)
正如米克科所说+添加&#34;名称&#34;每项意见的归属:
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>