親フォームに影響を与えずにネストされたフォームを検証する

Question

angularjs 1.5のネストされたフォームには妥当性検査の問題があり、issue in github about itがあります。

しかし、そのトピックの2人は解決策を提供し、そのうちの1つはngFormTopLevelディレクティブであるangularjsコアに、もう1つはisolate-formというユーザーによって提供されています。

しかし、どちらもこの状況に対応できず、私のために働くことはできません...少なくとも！

このような構造とさせて頂きます：

<ng-form name="X1" novalidate> 

    <ng-form name="X2" novalidate isolate-form> 

     <input name="Input01" ng-model="input1" required /> 
     <p ng-show="X2.Input01.$touched && X2.Input01.$invalid">input is not valid</p> 

     <input name="Input02" ng-model="input2" required /> 

     <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

    </ng-form> 

<input name="Input03" ng-model="input3" required ng-minlength="5" /> 

<input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.$invalid" /> 

</ng-form> 

TL; DRは： ButtonX1は、ネストされたフォームの検証に依存し、それはいけません！

---

テストケース1：

ステップ1：任意のテキストと5つ以上の文字でINPUT3記入してください。

期待：ButtonX1は有効にする必要があります。

結果：ButtonX1はまだ無効です。

---

テストケース2：

ステップ1：任意のテキストとINPUT1塗りつぶし。

手順2：input2に任意のテキストを入力します。

予想：ButtonX2が有効になっている必要があります。

結果：ButtonX2が有効です。

---

テストケース3：

ステップ1：任意のテキストと5つ以上の文字でINPUT3記入してください。

手順2：input1に任意のテキストを入力します。

手順2：input2に任意のテキストを入力します。

予想：ButtonX1とButtonX2が有効になっている必要があります。

結果：ButtonX1とButtonX2が有効になっています。

---

であり、もう1つの問題は、Input01が無効の場合、ネストされたフォーム内のPタグが表示されないことです。 isolateFormとngFormTopLevelの両方を試しましたが、両方ともこの問題があります。

Answer 1

私はこれがお客様の要件に応じた解決策だと思います。

<ng-form name="X1" novalidate> 

     <ng-form name="X2" novalidate isolate-form> 

      <input name="Input01" ng-model="input1" required /> 
      <p ng-show="X2.Input01.$invalid && X2.Input01.$touched">input is not valid</p> 

      <input name="Input02" ng-model="input2" required /> 

      <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

     </ng-form> 

     <input name="Input03" ng-model="input3" required ng-minlength="5" /> 

     <input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.Input03.$invalid" /> 

    </ng-form> 

Answer 2

親フォームコントローラで$ removeControlを呼び出す必要があるようです。この非常に単純な指令が私のために働いています。あなたの書式に適用してください。

function isolateFormDirective() { 
    return { 
     restrict: 'A', 
     require: ['form', '^form'], 
     link: function(scope, element, attrs, forms) { 
      forms[1].$removeControl(forms[0]); 
     } 
    } 
} 

export default isolateFormDirective;