In my Angular2 project, I have 2 select elements:
<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>
Is it possible to dynamically change the options of the second select based on the selection in the first select? This can be achieved by checking boolean values like:
company.companyRelations.pop().type1
company.companyRelations.pop().type2
If, for example, type1 is false, the option in the second select should be disabled and if type2 is true, the option should be enabled.
EDIT:
The companies in the select have properties such as desadv, invoic, and orders, which are either true or false. How can these properties be passed into component.ts properties?
company.companyRelations.pop().desadv
I want to retrieve the selected company's properties and use them to enable/disable options in the second select.
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;
One approach to implementing this functionality could be:
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;
}