web-dev-qa-db-ja.com

AngularJS：コントローラーで入力を$ validに手動で設定するにはどうすればよいですか？

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にアクセスしてモデル関数を別の場所に移動する別の方法がありますか？

javascriptvalidationangularjs
88
Christopher Marshall

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

入力要素の有効性を設定する必要があります。そのようです;

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

これで、入力（およびフォーム）は無効になりました。また、無効化の原因となるエラーを確認することもできます。

addItem.capabilities.errors.youAreFat == true;
142
Umur Kontacı

上記の回答は、問題の解決には役立ちませんでした。長い検索の後、私はこれにぶつかりました 部分的な解決策 。

入力フィールドを手動でng-invalidに設定する（ng-validに設定するには 'true'に設定する）このコードの問題をようやく解決しました：

$scope.myForm.inputName.$setValidity('required', false);
54
notMyName

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

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

私の場合、null可能boolがあり、人は2つの異なるボタンのいずれかを選択する必要がありました。はいと答えると、エンティティがコレクションに追加され、ボタンの状態が変わります。すべての質問に答えるまで（各ペアのボタンの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>
18
James Fleming

とても簡単です。たとえば、JSコントローラーでこれを使用します。

$scope.inputngmodel.$valid = false;

または

$scope.inputngmodel.$invalid = true;

または

$scope.formname.inputngmodel.$valid = false;

または

$scope.formname.inputngmodel.$invalid = true;

さまざまな要件に対応するためにすべてが機能します。これで問題が解決したらヒットします。

2
rahim.nagori