我有一个视图，其中包含要添加的人员列表，每行代表一个人，每行是一个人（人）数组中的项目，我在这个数组上重复使用ng-rpeat，当我添加新的时我的问题行或加载页面即使使用novalidate，fileds也会无效，并且任何行都有无效输入，这些字段将变为无效。
代码：
HTML：
<ng-form name="pplForm" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" ng-model="person.Email" name="email">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>
控制器内的代码：
var vm = this;
vm.people = People; // its resolved and come from backend could be {} initially.
vm.addPerson = addPerson;
vm.removePerson = removePerson;
if (!vm.company.People || vm.company.People.length === 0) {
addPerson();
}
function addPerson() {
if (!vm.company.People) {
vm.company.People = [];
}
vm.company.People.push({ Status : 'added'});
}
function removePerson(index) {
if (getActivePersons().length > 1) {
var person = vm.company.People[index];
// If is new person no need to send it at all.
if (person.Status && person.Status === 'added') {
vm.company.People.splice(index, 1);
} else { // If has status (or empty cuz is no action done before), then it need to be handeled from backend too.
vm.company.People[index].Status = 'deleted';
}
}
}
答案 0 :(得分：0)
我刚刚添加了fileds的名称，并使用{{$index}}对其进行了后缀，这解决了我遇到的所有问题：
<ng-form name="pplForm_{{$index}}" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName_{{$index}}" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName_{{$index}}" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone_{{$index}}" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" ng-model="person.Email" name="email_{{$index}}">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>