別の値に基づいてフィールドを作成する必要があります（国が米国の場合は州が必要です）

Question

国の値がUSAまたはCANADAの場合にのみ、STATESドロップダウンで簡単なフォーム検証を行います。

私の妥当性確認はこれまでのところ有効ですが、米国またはカナダの選択に依存しません。基本的には、現在、米国またはカナダ以外の国を選択しても、州を選択するよう強制されます。

<div class="row"> 
<div class="form-group" ng-class="{ 'has-error' : participantForm.country.$invalid && (!participantForm.country.$pristine || isSubmitted) }"> 
    <div class="col-sm-6 key">Country<span class="req">*</span>:</div> 
    <div class="col-sm-6 val"> 
     <select ng-model="participant.country" name="country" class="form-control" required ng-options="country.Key as country.Value for country in countries"> 
      <option value="">SELECT</option> 
     </select> 
     <p ng-show="participantForm.country.$error.required && (!participantForm.country.$pristine || isSubmitted)" class="help-block">Select a country.</p> 
    </div> 
</div> 

<div class="row"> 
<div class="form-group" ng-class="{ 'has-error' : participantForm.state.$invalid && (!participantForm.state.$pristine || isSubmitted) }"> 
    <div class="col-sm-6 key">US State or Canadian Province:</div> 
    <div class="col-sm-6 val"> 
     <select ng-model="participant.state" name="state" class="form-control" required ng-options="state.Key as state.Value for state in states"> 
      <option value="">SELECT</option> 
     </select> 
     <p ng-show="participantForm.state.$error.required && (!participantForm.state.$pristine || isSubmitted)" class="help-block">Your state is required for USA or Canada.</p> 
    </div> 
</div> 

Answer 1

あなたはラッピングフォーム要素の名前プロパティに値を与えた場合、AngularJSは自動的にその名前で$スコープにオブジェクトを配置する必要があります。たとえば、次のしている場合：

<form name="participantForm"> 
    <input name="state" /> 
</form> 

$ scope.participantFormは、ページ上のフォームに関する情報にアクセスすることを可能にする角度供給対象となります。それに加えて、フォーム入力要素にnameプロパティがある場合、フォームのプロパティである角度指定のオブジェクトもあります：$ scope.participantForm ["state"] 実際にあなたのビューでそれを使用します今は論理。

州/都道府県のselect input要素の "required"属性を削除して、常に入力を要求しないようにする必要があります。

代わりに、州/州入力の値が変更されるたびに発生し、国フィールドの値をチェックしてから、州/州フィールドの有効性を手動で適切に設定する機能が必要です。この関数は次のようになります。あなたはこの関数は時の状態フィールドの変更を実行し、ユーザーがフォームを送信しようとしたとき、あなたは唯一の適切な入力の妥当性を変更しないだろうことを確認する場合は

$scope.validateStateField = function() { 
    var isValid = true; 
    var country = $scope.participant.country; 
    if (country === "USA" || country === "Canada") { 
     var state = $scope.participant.state; 
     isValid = state != null && state !== ''; 
    } 
    $scope.participantForm["state"].$setValidity("required", isValid); 
} 

が、また、あなたが提出ロジックを続行する前にチェックするために、正しい値を持っています：

if ($scope.participantForm.$valid) { 
    // Proceed because everything checks out 
} 

私は角に、よりネイティブのカスタムバリデータを作成する方法もあると考えているが、これは私が手動でアプローチする傾向がある方法です依存検証。