おはようございます！私はまだAngularJSにかなり慣れていないので、完全に理解できる答えが見つかりませんでした.
次のような構造のフォームがあります。
- 名前
- Eメール
- カラー[オプションレッド、オプションブルー]
- [色] でオプション ブルーを選択した場合にのみ表示される必須フィールド
Option Blueを選択すると、2 番目のフィールド セットが表示されます。ただし、 「オプション ブルー」の選択を解除すると、必須フィールドは再び非表示になりますが、別のフィールド (「名前」など) をクリックして別の値を入力するまで、フォームはフィールドが空であることを「認識」します。
条件は、イベント リスナー (?) が発生するたびにブール値の$form.$validをチェックします。これは onItemSelect と onItemDeselect と onSelectionChange です。
私がAngularについて理解していることから、私は...クリックして別のフィールドに入力するまで、別のダイジェスト(?)サイクルが開始されていないと思いますか? 疑問符がいっぱいで申し訳ありません。私の知識は少し不安定で、理由によりソース コードを完全に貼り付けることができません。
私の理解は正しいですか？もしそうなら、この問題を解決するための推奨される方法はありますか?
編集:ダミーの変数名とオブジェクト名を含むいくつかのサンプル コードを以下に追加し、コードのより大きなセクションを要約するためにいくつかの擬似コードを追加しました。
<script>
var app = angular.module('myApp',[some stuff]);
app.controller('myContropper', function ($scope, $rootScope, $timeout) {
[some variables for scope]
$scope.color = {};
$scope.optionB = {
hue: null;
saturation: null;
};
[some other variables that only have values of OptionB is chosen and subsequent fields are populated]
$scope.colorChange = function() {
if color is changed, clear all associated arrays and values by setting it to either '[];' or 'null;'
};
$scope.checkForm = function() {
if OptionB is not chosen, clear all options related to OptionB
use $scope.form.$valid boolean value and do something with it
};
function onItemSelect(item) {
if OptionB is selected, set the flag for that option to true
$scope.checkForm();
}
function onItemDeselect(item) {
if OptionB is not selected, set the flag for that option to false
$scope.checkForm();
}
}
</script>
いくつかのデバッグ アラートを設定しました。OptionBlue の選択を解除すると、アラートに次の行が表示されることに気付きました: requiredFieldifOptionBisChosen: object Object
ただし、別のフィールドをクリックして値を入力すると、フォームは有効性を更新 (?) し、「requiredFieldifOptionBisChosen: null」と表示されます。