関連オブジェクトフィールドのいずれかが満たされている場合、ng-requiredを作成する方法は？

Question

デフォルトでは、最初の人物の詳細required="true"が残りの人物に基づいてrequired="true"になります。

スニペットの現在の問題点は、最後の人物が1つのフィールドで満たされたときに検証されないことです。

デモ：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

あなたはそれがほとんど右だ - あなたのコードとマイナーな問題があります。あなたのコードで

​​

、あなたはあなたの$scope.membersの鍵のうち、作成された配列のインデックスとしてiを計算します。あなたがFirstとLastのフォームに記入し、$scope.members = {0: ..., 2: ...}のキーを取得するとします。あなたはこの行var numMembers = Object.keys($scope.members).length;を呼び出すとき

は今、あなたはnumMembers = 2を取得し、あなたのforサイクルで、あなたの第二iのために、あなたのif条件を評価するとき、あなたはこの取得：Object.keys($scope.members[1]).lengthを、しかし、変数あなたのメンバーで1キーがありませんしたがって、エラーです。この問題を解決するには

は、既存のキー自体の配列にあなたのforループをベース：

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はあなたのplunkerの作業フォークです。