CODEWITHSUNDEEP
htmlangulartypescript
Abhijeet Mohanty
Abhijeet Mohanty

Reputation: 344

Disabling a form based on the other form's input

I am currently working on 2 drop down forms, say form1 and form2. I have a certain list of values in form1 clicking which form2 would be disabled and for some it would not be disabled. I am working on Angular 4 with TypeScript. Any place where I could start figuring out how to achieve this?

Below is my form code

  <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>

So I want to disable the second form group when Strict run is selected from the first form.

Upvotes: 1

Views: 61

Answers (2)

Abhishek Singh
Abhishek Singh

Reputation: 910

In first select you can fire an function which will work on change event like this

<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>

and in ts file define a boolean variable and change its value on change event like this

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

and in your second select bind that boolean variable like this

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

Upvotes: 2

Akash Shrivastava
Akash Shrivastava

Reputation: 1365

You can do this with a simple JS event listener.

I assume this is what you wanna do:

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>

Upvotes: 2

Related Questions