Wie wird ng-required wahr gemacht, wenn eines der zugehörigen Objektfelder gefüllt ist?

Question

Standardmäßig sind die Daten der ersten Person required="true", aber das Formular der übrigen Person ist required="true" basierend auf einem seiner Felder gefüllt oder nicht.

Das aktuelle Problem des Snippets ist, dass es nicht gültig ist, wenn die letzte Person ein Feld ausgefüllt hat.

Demo: http://plnkr.co/edit/WUpybR1tNq5QFjlTB2E7?p=preview

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', function($scope) { 
 
    $scope.person = [{isRequired: true}, {isRequired: false}, {isRequired: false}, {isRequired: false}]; 
 
    $scope.members = {}; 
 
    $scope.submitForm = function() { 
 
    console.clear(); 
 
    if (typeof $scope.members != 'undefined' && Object.keys($scope.members).length) { 
 
     var numMembers = Object.keys($scope.members).length; 
 
     for (i = 0; i < numMembers; i++) { 
 
     if (Object.keys($scope.members[i]).length <= 2) { 
 
      $scope.person[i].isRequired = true; 
 
     } 
 
     } 
 
    } else { 
 
     $scope.person = [{isRequired: true}, {isRequired: false}, {isRequired: false}, {isRequired: false}]; 
 
    } 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.9"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl" class="container"> 
 
    <form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate> 
 
    <h4>First person</h4> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.firstnameOne.$invalid) || (!myForm.firstnameOne.$pristine && myForm.firstnameOne.$invalid)}"> 
 
     <label>First Name</label> 
 
     <input type="text" class="form-control" name="firstnameOne" placeholder="First Name" ng-model="members[0].fname" ng-required="person[0].isRequired"> 
 
    </div> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.lastnameOne.$invalid) || (!myForm.lastnameOne.$pristine && myForm.lastnameOne.$invalid)}"> 
 
     <label>Last Name</label> 
 
     <input type="text" class="form-control" name="lastnameOne" placeholder="Last Name" ng-model="members[0].lname" ng-required="person[0].isRequired"> 
 
    </div> 
 
    <h4>Second person</h4> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.firstnameSecond.$invalid) || (!myForm.firstnameSecond.$pristine && myForm.firstnameSecond.$invalid)}"> 
 
     <label>First Name</label> 
 
     <input type="text" class="form-control" name="firstnameSecond" placeholder="First Name" ng-model="members[1].fname" ng-required="person[1].isRequired"> 
 
    </div> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.lastnameSecond.$invalid) || (!myForm.lastnameSecond.$pristine && myForm.lastnameSecond.$invalid)}"> 
 
     <label>Last Name</label> 
 
     <input type="text" class="form-control" name="lastnameSecond" placeholder="Last Name" ng-model="members[1].lname" ng-required="person[1].isRequired"> 
 
    </div> 
 
    <h4>Last person</h4> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.firstnameThird.$invalid) || (!myForm.firstnameThird.$pristine && myForm.firstnameThird.$invalid)}"> 
 
     <label>First Name</label> 
 
     <input type="text" class="form-control" name="firstnameThird" placeholder="First Name" ng-model="members[2].fname" ng-required="person[2].isRequired"> 
 
    </div> 
 
    <div class="form-group" ng-class="{ 'has-error' : (myForm.$submitted && myForm.lastnameThird.$invalid) || (!myForm.lastnameThird.$pristine && myForm.lastnameThird.$invalid)}"> 
 
     <label>Last Name</label> 
 
     <input type="text" class="form-control" name="lastnameThird" placeholder="Last Name" ng-model="members[2].lname" ng-required="person[2].isRequired"> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
 
    <br><hr> 
 
    <h4>Data</h4> 
 
    <pre>{{members | json}}</pre> 
 
    <h4>Validation</h4> 
 
    <pre>{{person | json}}</pre> 
 
</div>

Answer 1

Du hast es fast richtig - ein kleines Problem mit Ihrem Code ist.

var numMembers = Object.keys($scope.members).length; // <-- length of keys 
    for (i = 0; i < numMembers; i++) { // <-- iterate over length, not actual indexes 
    if (Object.keys($scope.members[i]).length <= 2) { 
     $scope.person[i].isRequired = true; 
    } 
    } 

In Ihrem Code, berechnen Sie i als der Index des Arrays aus den Tasten Ihres $scope.members erstellt. Stellen Sie sich vor, Sie füllen die Formulare First und Last aus und erhalten $scope.members = {0: ..., 2: ...} Schlüssel.

Nun, wenn Sie diese Zeile var numMembers = Object.keys($scope.members).length; nennen, erhalten Sie numMembers = 2, und wenn in Ihrem for Zyklus Sie bewerten Ihre if Zustand, für Ihre zweite i, erhalten Sie dieses: Object.keys($scope.members[1]).length, aber es ist nicht 1 Schlüssel in Ihren Mitgliedern variable daher der Fehler.

Um dies zu beheben, stützen Ihre for-Schleife auf dem Array von vorhandenen Schlüssel selbst:

var members = Object.keys($scope.members); 
    for (i = 0; i < members.length; i++) { 
    if (Object.keys($scope.members[members[i]]).length <= 2) { // Check key length of the existing keys only. 
     $scope.person[members[i]].isRequired = true; 
    } 
    } 

Here ist eine Arbeitsgabel Ihrer Plunker.