I have a dilemma with 2 different components that are responsible for creating an invoice.
- The first component adds more products
- The second component adds invoice details
Initially, I enter the invoice details and select the client's name. The selection process involves an autocomplete feature that searches for the name. Once a client is selected, the view displays more details about that specific client. However, in the past, when adding products in a separate component and navigating to the invoice upon submission, the client's name and additional details were lost.
Here is the HTML code:
<div class="input-field col s12">
<input formControlName="client_id" id="client_id" matInput placeholder="Select Client*" aria-label="State" [matAutocomplete]="auto"
autoActiveFirstOption [formControl]="client_id">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith" >
<mat-option (onSelectionChange)="updateClient($event, item.client_id, 'client_id')" *ngFor="let item of filteredOptionsClient | async"
[value]="item.clientName">
{{ item.clientName }}
</mat-option>
</mat-autocomplete>
</div>
<div class="input-field col s12">
Contact No:
<span style="color:darkblue">{{selectedClient.contactno}}</span>
</div>
And here is the TypeScript code:
filteredOptionsClient: any;
client_id: FormControl = new FormControl();
ngOnInit() {
this.cs.getAllClients().subscribe(
client => {
this.client = client.map((clients) => {
this.filteredOptionsClient = this.client_id.valueChanges.pipe(
startWith(''),
map(val => this.filterClient(val))
);
return new Client(clients);
});
}
}
);
}
updateClient(ev: any, idd: any, componentid: any) {
if (ev.isUserInput) {
if (componentid === 'client_id') {
this.clientid = idd;
console.log('idd', idd)
this.addsale['controls']['client_id'].setValue(ev.source.value);
} else {
console.log('ooops');
}
}
let selectedClient = new Client('')
this.selectedClient = null;
for (let i = 0; i < this.client.length; i++) {
console.log('updateclient', this.client[i].client_id)
console.log('updateclientidd', idd)
if (this.client[i].client_id === idd) {
this.selectedClient = this.client[i];
}
}
}
Can you provide any suggestions or ideas on how to resolve this issue?