1

オプションで選択しています。記録されたユーザーに関する選択値を初期化したいと思いますng-init="own = credentials.user_id"。

user_idが の値と等しい場合に機能しますselect。しかし、等しくない場合、選択される値は です"?"。したがって、本来あるべきエラーはありません。

"?"これを選択せず​​、フォームを無効にしたいと思います。

解決策はありますか？ 

<div ng-class="{ 'error-select': myForm.lead.$error.required == true }"><span>Leader</span></div>

<select ng-model="lead" name="lead" ng-options="leader.user_id as leader.user_display_name for leader in leaders" ng-init="lead = credentials.user_id" required></select> 

<div ng-class="{ 'error-select': myForm.own.$error.required == true }"><span>Leader</span></div>

<select ng-model="own" name="own" ng-options="own.user_id as own.user_display_name for own in owns" ng-init="own = credentials.user_id" required></select>

出力: user_id = 4

  <select t ng-model="lead" name="lead" ng-options="leader.user_id as leader.user_display_name for leader in leaders" ng-init="lead = credentials.user_id" required="" class="ng-pristine ng-valid ng-valid-required">
   <option value="0">Alexandre</option>
   <option value="1">Antoine</option>
   <option value="2">Zaaza</option>
   <option value="3">toro</option>
   <option value="4"selected="selected">Steffi</option>
  </select>

  <select t ng-model="own" name="own" ng-options="own.user_id as leader.user_display_name for own in owns" ng-init="own = credentials.user_id" required="" class="ng-pristine ng-valid ng-valid-required">
   <option value="?" selected="selected"></option>
   <option value="1">Alexandre</option>
   <option value="2">Steffi</option>
  </select>
4

2 に答える 2

3

この要件はそれほど単純ではなく、いくつかのアプローチが考えられます。(選択したものが最適かどうかはわかりません。)

TL;DR
これが実際のデモです。

どうしたの ？

まず最初に、実際に何が起こっているのかを理解する必要があります。
コントロールの有効状態 ( $valid/ ) は、または$invalidに依存します。ここで重要な点は、要素の実際のプロパティに依存しないことです。$modelValue$viewValuevalue

$modelValueを配列にないもの(3 など)に設定しようとするとusers、つまり有効な<option>要素が利用できない場合、Angular は$modelValueand$viewValueを 3 に設定しますが、<select>はvalueいずれかになります?(追加していない場合空の<option>要素) または明示的に追加された empty の値<option>。

しかし、検証は要素に基づいていないvalueため、すべてが観点から$valid見えます。required

解決策

1 つの解決策は、要素にアクセスし、それ自体を関数ngModelControllerに "フック"するカスタム ディレクティブを作成することです。 このディレクティブは、要素が(無効であることを示す) かどうかをチェックし、そうである場合は、 /を実際に空の何かに設定します。これにより、コントロールの有効性が正しく更新されます (つまり、無効な場合、ディレクティブのハンドラーがそれを空の何かにリセットするようにトリガーされます)。制約は満たされません）。$render()
value?$modelValue$modelValue$viewValue$modelValuerequired

コードは次のとおりです。

app.directive('select', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 10,
        link: function postLink(scope, elem, attrs, ctrl) {
            if (!ctrl) { return; }
            var originalRender = ctrl.$render.bind(ctrl);
            ctrl.$render = function () {
                originalRender();
                if ((elem.val() === '?') && !ctrl.$isEmpty(ctrl.$modelValue)) {
                    ctrl.$setViewValue(undefined);
                }
            };
        }
    };
});

この短いデモも参照してください。

上記の実装に関して注意すべき点がいくつかあります。

  1. selectすべての選択要素に適用されるように、ディレクティブに名前を付けることにしました (ネイティブの Angularselectディレクティブと一緒に - はい、可能です)。特定のコントロールのみに適用する場合は、名前を変更し、属性 ( restrict: 'A') に制限して、属性として要素に追加します。

  2. のおかげで (またはおかげで) require: '?ngModel'、 にバインドされていない場合、コントロールは無視されますngModel。

  3. このディレクティブは、ディレクティブngModelController.$render()によって定義されたselect(優先度 0 で実行される) メソッドを拡張するため、ディレクティブのリンク関数をディレクティブの後に強制的に実行する必要がありselectます。したがって、「リンク後の機能は逆[優先度]の順序で実行される」ため、より高い優先度が必要です。.

于 2014-05-23T13:22:11.927 に答える