web-dev-qa-db-ja.com

AngularJSの非表示フィールドと無効フィールドの検証

AngularJSで条件付き検証を行う方法はありますか？私が解決しようとしている問題は、基本的に、選択に基づいて入力を有効/無効にするラジオボタンのリストです。次の画像は問題を表しています。最初のテキスト入力は文字のみを受け入れ、2番目のテキスト入力は数字のみを受け入れます。どちらにもng-patternとng-requiredが設定されています。 （プランカーの実例）

Screenshot of the problem in question

私が達成したいのは、ラジオボタンが選択されると、対応する入力フィールドの検証がオフになることです。

ng-disabledをtrueに設定すると、問題のフォームコントロールに無効な状態が設定されないようになることを期待していましたが、残念ながらそうではありません。

私がこれまでに見つけた唯一の解決策は、別の選択肢を選択してng-requiredをfalseに設定するたびに入力をクリアすることです。これを達成するための賢明な方法はありますか、それともDOMから要素を完全に取り除く唯一の解決策ですか？

formsangularjsvalidation
13
RJo

このディレクティブを試してください：

.directive('disableChildren', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs,form) {
      var control;

      scope.$watch(function() {
        return scope.$eval(attrs.disableChildren);
      }, function(value) {
        if (!control) {
          control = form[element.find("input").attr("name")];
        }
        if (value === false) {
          form.$addControl(control);
          angular.forEach(control.$error, function(validity, validationToken) {
            form.$setValidity(validationToken, !validity, control);
          });
        } else {
          form.$removeControl(control);
        }
      });
    }
  }
})

[〜＃〜]デモ[〜＃〜]

それがどのように機能するかの詳細と説明については。検証から非表示の要素を除外するための同様のディレクティブを確認してください。

非表示の入力要素を検証から除外するディレクティブの実装（$ addControlの問題）

どういうわけか、これらのディレクティブを組み合わせて、式の評価方法に応じてどこでも使用できる一般的なディレクティブを作成できると思います。

7
Khanh TO

マーマイトが示唆しているように、ng-requiredは式を受け入れることができるので、次のように言うことができます。

<input name="numeric" ng-required="alpha.disabled == false" />
<input name="alpha" ng-required="numeric.disabled == false" />

無効な状態をチェックする方法がわかりません-それはそれを行うべきですが、チェックボックスの状態をチェックすることによってのみこの効果を作成したことがあります。

これはラザロの投稿だと思いますが、他の人の役に立つことを願っています。

4
DisasterMan

Ng-requiredを間違って使用していると思います。両方のテキスト入力に対してtrueにハードコーディングしましたが、実際には、これらの入力でng-requiredは、ラジオボタンがチェックされている場合にのみtrueに設定する必要があります。

0
marmite