93

TokenInputプラグインを使用し、 AngularJS 組み込みの formController 検証を使用します。

現在、フィールドにテキストが含まれているかどうかを確認し、含まれている場合はフィールドを有効に設定しようとしています。プラグインを使用する際の問題は、それが独自の入力を作成し、次に stlying 用の ul+li を作成することです。

addItem (フォーム名) とコントローラーの機能にアクセスできます。$valid に設定するだけです。

マークアップ。

<form class="form-horizontal add-inventory-item" name="addItem">
     <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required>
     <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div>
</form>

JS。

$scope.capabilityValidation = function (capability) {
  if (capability.name !== "") {
    addItem.capabilities.$valid = true;
    addItem.capabilities.$error.required = false;
  } else {
    addItem.capabilities.$valid = false;
    addItem.capabilities.$error.required = true;
  }
};

TokenInput に何かが入力され、オブジェクトに渡されたときに、capabilityValidation 関数を実行しています。

編集：

私の入力で ng-model が機能し、オートコンプリートの結果を取得することがわかりました。これが、モデルに基づいているため、 ng-valid を機能させることができない理由です。

$scope.inventoryCapabilitiesAutoComplete = {
  options: {
    tokenLimit: null
  },
  source: urlHelper.getAutoComplete('capability')
};

私はこのオートコンプリートの実装を書きませんでした。ng-model attr にアクセスしてモデル関数を別の場所に移動する別の方法はありますか?

4

5 に答える 5

153

フォームの有効性を直接変更することはできません。すべての子孫入力が有効な場合、フォームは有効であり、そうでない場合は無効です。

あなたがすべきことは、入力要素の有効性を設定することです。そのようです;

addItem.capabilities.$setValidity("youAreFat", false);

これで、入力 (およびフォーム) が無効になります。また、無効化の原因となったエラーも確認できます。

addItem.capabilities.errors.youAreFat == true;
于 2013-03-16T09:50:01.953 に答える
62

上記の回答は、私の問題を解決するのに役立ちませんでした。長い検索の後、私はこの部分的な解決策に出くわしました。

入力フィールドを手動で ng-invalid に設定するために、このコードで問題を最終的に解決しました (ng-valid に設定するには、「true」に設定します)。

$scope.myForm.inputName.$setValidity('required', false);
于 2014-03-26T15:24:35.043 に答える
18

同様の問題があるこの投稿に出くわしました。私の修正は、無効な状態を保持するための隠しフィールドを追加することでした。

<input type="hidden" ng-model="vm.application.isValid" required="" />

私の場合、人が2つの異なるボタンのいずれかを選択しなければならないnull可能なブールがありました。はいと答えると、エンティティがコレクションに追加され、ボタンの状態が変わります。すべての質問に回答するまで (各ペアのボタンの 1 つがクリックされるまで)、フォームは有効ではありません。

vm.hasHighSchool = function (attended) { 
  vm.application.hasHighSchool = attended;
  applicationSvc.addSchool(attended, 1, vm.application);
}

<input type="hidden" ng-model="vm.application.hasHighSchool" required="" />
<div class="row">
  <div class="col-lg-3"><label>Did You Attend High School?</label><label class="required" ng-hide="vm.application.hasHighSchool != undefined">*</label></div>
  <div class="col-lg-2">
    <button value="Yes" title="Yes" ng-click="vm.hasHighSchool(true)" class="btn btn-default" ng-class="{'btn-success': vm.application.hasHighSchool == true}">Yes</button>
    <button value="No" title="No" ng-click="vm.hasHighSchool(false)" class="btn btn-default" ng-class="{'btn-success':  vm.application.hasHighSchool == false}">No</button>
  </div>
</div>
于 2015-03-18T00:13:16.897 に答える