6

angularjs 1.5 のネストされたフォームには検証の問題があり、それについて github に問題があります。

しかし、そのトピックの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: input3 に 5 文字以上の任意のテキストを入力します。

想定: ButtonX1 を有効にする必要があります。

結果: ButtonX1 は無効のままです。

テスト ケース 2:

ステップ 1: input1 に任意のテキストを入力します。

ステップ 2: input2 に任意のテキストを入力します。

想定: ButtonX2 を有効にする必要があります。

結果: ButtonX2 が有効になります。

テスト ケース 3:

ステップ 1: input3 に 5 文字以上の任意のテキストを入力します。

ステップ 2: input1 に任意のテキストを入力します。

ステップ 2: input2 に任意のテキストを入力します。

想定: ButtonX1 と ButtonX2 を有効にする必要があります。

結果: ButtonX1 と ButtonX2 が有効になります。

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

4

2 に答える 2

2

これがあなたの要件による解決策だと思います。

<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>
于 2016-06-23T11:30:20.103 に答える