他のフォームの入力に基づいてフォームを無効にする

Question

現在2つのドロップダウンフォーム、たとえばform1およびform2に取り組んでいます。私はform1の値の特定のリストを持っていますform2は無効にされ、無効にされないものもあります。私はTypeScriptを使ってAngular 4を扱っています。どのようにこれを達成するために考え始めることができる場所？

は以下厳格な実行が最初のフォームから選択されたときに

<div class="form-group" style="width: 350px"> 
     <label for="form_periodicity"><b>Periodicity</b></label><br> 
     <select class="form-control" id="periodicity" style="width: 222px"> 
     <option>EOD</option> 
     <option>Daily</option> 
     <option>Weekly</option> 
     <option>Monthly</option> 
     <option>Strict run</option> 
     </select> 
    </div> 
    <div class="form-group" style="width: 350px"> 
     <label for="form_timeofexecution"><b>Time of execution</b></label><br> 
     <select class="form-control" id="timeofexecution" style="width: 222px"> 
     <option>0:00</option> 
     <option>0:30</option> 
     <option>1:00</option> 
     <option>4:00</option> 
     <option>5:00</option> 
     </select> 
    </div> 

は、だから私は第二の形式グループを無効にしたい私のフォームコードです。

Answer 1

あなたはこの

<select class="form-control" id="periodicity" (change)="onChange($event)" style="width: 222px"> 
    <option>EOD</option> 
    <option>Daily</option> 
    <option>Weekly</option> 
    <option>Monthly</option> 
    <option value="0">Strict run</option> 
</select> 

のように変更イベント上で動作する機能を起動することができます選択して、 in tsファイルでブール変数を定義し、このような変更イベントでその値を変更します

disableSelect:bolean 
onChange(e){ 
let chosen= parseInt((<HTMLSelectElement>e.srcElement).value); 
if(chosen.value==0){ 
    this.disableSelect=true; 
    return; 
} 
this.disableSelect=false; 
} 

この

<select class="form-control" id="dayofexecution" [disabled]="disableSelect" style="width: 222px"> 

Answer 2

これは、単純なJSイベントリスナーで行うことができます。

私は、これはあなたがしたいものですと仮定します。最初に

window.addEventListener('load', function(){ 
 
    document.getElementById('periodicity').addEventListener('click', function(e){ 
 
    if(e.target.value == 'Strict run') 
 
     document.getElementById('dayofexecution').disabled = true; 
 
    else 
 
     document.getElementById('dayofexecution').disabled = false; 
 
    }) 
 
});

<div class="form-group" style="width: 350px"> 
 
     <label for="form_periodicity"><b>Periodicity</b></label><br> 
 
     <select class="form-control" id="periodicity" style="width: 222px"> 
 
     <option>EOD</option> 
 
     <option>Daily</option> 
 
     <option>Weekly</option> 
 
     <option>Monthly</option> 
 
     <option>Strict run</option> 
 
     </select> 
 
    </div> 
 
    <div class="form-group" style="width: 350px"> 
 
     <label for="form_dayofexecution"><b>Time of execution</b></label><br> 
 
     <select class="form-control" id="dayofexecution" style="width: 222px"> 
 
     <option>0:00</option> 
 
     <option>0:30</option> 
 
     <option>1:00</option> 
 
     <option>4:00</option> 
 
     <option>5:00</option> 
 
     </select> 
 
    </div>