We are developing our Angular 5 application using Angular material. we have 2 set of 4 similar autocomplete type fields. We have implemented using Material AutoComplete fields.
the first set of 4 fields are used to fetch the customer details. the second set of fields fetches the customer details but the visibility of the second set is optional controlled by a checkbox. The functionality was working fine. But when I implemented force selection by means of tag:MatAutocompleteTrigger subscribe the first set of fields are working fine. Whereas for the second set of fields on load should be invisible only while the checkbox is checked, the second set of fields will become visible.
Due to which there is an error, I am placing the code snippet where the error occurs. I am just showing here for one field altCustomerName with the id altCustomerNameId. I tried to make this id value to true on tag:ngOnInit and set to false on tag:ngAfterViewInit. But that also ends up in error.
HTML (view)
<mat-form-field>
<input placeholder="Customer Name" type="text" #altCustomerNameId matInput [formControl]="altCustomerNameControl" [(ngModel)]='selectedAltCustomerName' [matAutocomplete]="altCustomerName" required>
<mat-autocomplete #altCustomerName="matAutocomplete" class='customerDetails'>
<mat-option (click)="setAltCustomerDetails(altCustomer)" *ngFor="let altCustomer of filteredAltCustomersByName | async" [value]="altCustomer.name">
{{ altCustomer.custnum + ' ' + altCustomer.name + ' '+ altCustomer.countryname }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Component code: (Inside the class the altCustomerNameControl is declared)enter code here
@ViewChild('altCustomerNameId', {
read: MatAutocompleteTrigger
})
altCustomerNameTrigger: MatAutocompleteTrigger;
..
....
....
ngAfterViewInit() {
this._subscribeToClosingActions();
}
ngOnDestroy() {
....
if(this.altCustomerNameSubscription &&
!this.altCustomerNameSubscription.closed)
.....
}
this.altCustomerCodeSubscription = this.altCustomerCodeTrigger.panelClosingActions.subscribe(
event => {
if (!event || !event.source) {
this.altCustomerNameControl.setValue('');
this.altCustomerCodeControl.setValue('');
this.selectedAltCustomerName = '';
this.selectedAltCustomerCode = '';
this.selectedAltCustomerCountry = '';
}
},err => this._subscribeToClosingActions(),
() => this._subscribeToClosingActions()
);
Please let me know if you need any clarifications in the code.
