3

利用可能なプランカーはこちら

角度のあるui-routerネストされたビューを使用して、マルチステップ フォーム (一種のウィザード) を実装していますが、フォームの検証に問題があります。フォームはすべてのネストされたビューで共有されますが、検証は送信ボタンが配置されているネストされたビューにのみ影響するようです。

ネストされたビュー:

$stateProvider
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })

    .state('form.step1', {
        url: '/step1',
        templateUrl: 'form-step1.html'
    })

    .state('form.step2', {
        url: '/step2',
        templateUrl: 'form-step2.html'
    });

ネストされたビューごとに 1 つの入力が必要です。

フォーム step1.html:

<input type="text" name="required1" ng-model="formData.required1" required>

フォーム step2.html:

<input type="text" name="required2" ng-model="formData.required2" required>

このネストされたビュー (ウィザードの最後のステップ) には、送信ボタンもあり、フォームが有効でない場合は無効になっています。

<button ng-disabled="form.$invalid" ng-submit="submit">Submit</button>

さて、このビューの入力に対する検証はうまく機能していますが、前のビュー (form-step1.html) の入力は考慮されていません。フォームはすべてのビューで同じなので、input required1も検証する必要があると思います。ただし、入力必須 1が空であっても、フォームは有効であると見なされます。

だから、私の質問は次のとおりです。ネストされたすべてのビューの入力を念頭に置いてフォームを検証するにはどうすればよいですか?

助けてくれてありがとう。

4

1 に答える 1

2

これについてしばらく考えた結果、ここで最も簡単な選択は、各フォーム ステップ (ネストされたビュー) を個別に検証することだと思います。

そのため、フォームが特定のネストされたビュー ( form-step1 ) に対して有効になるまで、次のステップに進むためのボタン ( form-step2 ) は無効になっています。このようにすると、最後のネストされたビュー (送信ボタンを含む OP ケースのform-step2 ) に到達したときに、以前のすべてのフォームステップが既に検証されています。したがって、現在のネストされたビューのフォームを検証して、フォーム全体が有効であることを保証する必要があります。

更新された form-step1.html :

<div>
    <label for="required1">Required 1</label>
    <input type="text" name="required1" ng-model="formData.required1" required>
</div>

<div>
    <button ng-disabled="form.$invalid" ui-sref="form.step2" type="button">Next</button>
</div>

ここでプランカーを更新しました。

于 2015-11-14T11:50:16.683 に答える