NGリピートでNG-形と

Question

だから、私はこのようなNG-フォームのネストされたセットを持つ親フォーム持っているすべてのフォームの検証ステータスチェック：私は、ボタンを持っている

<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate> 
    <div class="col-xs-12 row-title"> 
     <h1>{{ model.type || 'Delivery' }} address</h1> 
    </div> 

    <div class="col-xs-12 col-sm-4 col-lg-4"> 
     <div class="form" name="saveForm" ng-form> 
      <div class="form-group"> 
       <label class="control-label">Company name</label> 
       <input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" /> 
      </div> 

      <div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }"> 
       <label class="control-label">House name/number</label> 
       <input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required /> 
      </div> 

      <div class="form-group"> 
       <label class="control-label">Street</label> 
       <input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" /> 
      </div> 

      <div class="form-group"> 
       <label class="control-label">Town</label> 
       <input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" /> 
      </div> 

      <div class="form-group"> 
       <label class="control-label">County</label> 
       <input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" /> 
      </div> 

      <div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }"> 
       <label class="control-label">Post code</label> 
       <input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required /> 
      </div> 
     </div> 
    </div> 
</form> 

を：

<div class="row"> 
    <div class="col-xs-12 col-sm-4 col-lg-4"> 
     <div div class="row"> 
      <div class="col-xs-6 tile"> 
       <a class="red" ui-sref="^"> 
        <i class="fa fa-trash"></i> 
        <div class="footer">Back</div> 
       </a> 
      </div> 

      <div class="col-xs-6 tile" ng-if="parentForm.$valid"> 
       <a class="yellow" ui-sref="^.finance"> 
        <i class="fa fa-arrow-right"></i> 
        <div class="footer">Continue</div> 
       </a> 
      </div> 

     </div> 
    </div> 
</div> 

すべての子フォームが有効である場合にのみ、このボタンを表示します。私はちょうどparentForm.$validを使うことができると思っていたが、うまくいかなかった。 誰もこれを解決する方法を知っていますか？

Answer 1

ネストされたフォームは、HTML5で有効ではありません動作します - しかし、あなたはparentForm外のごsaveFormを配置し、あなたの入力要素のためのフォームを指定するには、input要素のform属性を使用することができます。

<form name="form1"> 
    <input type="string" ng-model="form1input" required> 
    <input type="string" form="form2" ng-model="form2input" required> 
</form> 
<div ng-form="form2" id="form2"></div> 
<button ng-if="form1.$valid && form2.$valid">Click</button> 

Plunker：https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview

Answer 2

parentForm.saveFormを試してください。$ valid。

それは