带有 ng 重复新形式的角度 ng 形式开始无效

Question

我有一个包含要添加的人员列表的视图，每行代表一个人，每一行都是人员（人）数组中的一个项目，我确实在这个数组上重复ng-rpeat，当我添加新行或加载页面时，即使novalidate文件也开始无效，并且任何行输入无效，字段都变得无效。

代码 ：

.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';
        } 
    }
}

Answer 1

我只是添加了归档的名称，并用{{$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>