Angular 2 changing disabled/enabled select options

Question

I'm using Angular2 and I have 2 selects:

<div ng-controller="ExampleController">
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect">
  <option *ngFor="let company of companies" 
           value="{{company.id}}"> {{company.name}}
  </option>
</select>

<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
  <option value="type1">type1</option>
  <option value="type2">type2</option>
  <option  value="type3">type3</option>
</select>
 </form>
 <hr>
</div>

I want to change second select options depending on the first select. I can get types (boolean value) by using

company.companyRelations.pop().type1

company.companyRelations.pop().type2

And now, if for example type1 is false, the option in second select should be disabled and if type2 is true, option should be enabled. Is that possible?

EDIT:

Companies in select have deasdv, invoic and orders properties which are true or false. How can i now pass these properties into component.ts properties? Is it possible by event or what? I want to get for example

company.companyRelations.pop().desadv

For company which is selected and it will change disabled options in the second one.

html

<form name="myForm">
<label for="companySelect"> Company: </label>
<select class="form-control" name="companySelect" id="companySelect" 
 [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option *ngFor="let company of companies" [ngValue]="company.id">
 {{company.name}}</option>
</select>

<select  name="documentTypeSelect" id="documentTypeSelect">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option [disabled]="!desadv" value="desadv">desadv</option>
  <option [disabled]="!invoic" value="invoic">invoic</option>
  <option  [disabled]="!orders" value="orders">orders</option>
</select>
</form>

component.ts

  desadv: boolean = false;
  invoic: boolean = false;
  orders: boolean = false;

and here it will be something like:

  onChange(event) {
   if(event.desadv) {
     this.desadv = true;
   }
  }

My solution:

html

 <form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect" [(ngModel)]="companySelect" 
(ngModelChange)="onChange($event)">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option *ngFor="let company of companies" [ngValue]="company">
{{company.name}}</option>
</select>

<label for="documentTypeSelect"> Type: </label>
<select  name="documentTypeSelect" id="documentTypeSelect">
  <option [ngValue]="undefined" disabled  selected>Select...</option>
  <option [disabled]="!desadv" value="desadv">desadv</option>
  <option [disabled]="!invoic" value="invoic">invoic</option>
  <option  [disabled]="!orders" value="orders">orders</option>
  <option  [disabled]="!recadv" value="orders">recadv</option>
  <option  [disabled]="!shipment" value="orders">shipment</option>
</select>

component.ts

 onChange(event) {
this.desadv = event.companyRelations[0].desadv;
this.invoic = event.companyRelations[0].invoic;
this.orders = event.companyRelations[0].orders;
this.recadv = event.companyRelations[0].recadv;
this.shipment = event.companyRelations[0].shipment;
}

Answer 1

Try this :

<select class="form-control" name="companySelect" id="companySelect" [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
    <option [ngValue]="undefined" disabled  selected>Select...</option>
    <option *ngFor="let company of companies" [ngValue]="company.id">{{company.name}}</option>
</select>

<select [disabled]="btnDisable" name="documentTypeSelect" id="documentTypeSelect">
  <option value="type1">type1</option>
  <option value="type2">type2</option>
  <option  value="type3">type3</option>
</select>

component.ts

private companySelect: any;
private btnDisable: boolean = true;

onChange(event) {
    if(event) {
        this.btnDisable = false;
    }
}