I am working on a form that collects information about streets and their corresponding neighborhoods:
https://i.sstatic.net/FAZLK.png
When I click on a button in the grid to edit, the street data is displayed like this:
https://i.sstatic.net/UHiLX.png
One thing I am struggling with is automatically selecting the neighborhoods that correspond to the street, like shown in the following image:
https://i.sstatic.net/IaLvy.png
Here is the HTML code snippet:
<form [formGroup]="frmCalle">
<div class="form-group">
<label>NOMBRE*</label>
<input matInput id="txtCalle" formControlName="nombre" [(ngModel)]="inputCalle" type="text" class="form-control inputAbm" placeholder="Enter Street Name">
<button *ngIf="inputCalle !== ''" mat-button (click)="resetForm('calle')" matSuffix mat-icon-button aria-label="Clear" matTooltip="Clear Text">
<i class="material-icons">clear</i>
</button>
<br><br>
<label>NEIGHBORHOOD</label><br>
<mat-select formControlName="barrio" class="form-control inputAbm" [(ngModel)]="selectBar" placeholder="Select Neighborhood" multiple>
<mat-option *ngFor="let item of arrBarrio" [value]="item.bar_IDBarrio">{{ item.bar_nombre }}</mat-option>
</mat-select>
<button *ngIf="selectBar !== ''" mat-button (click)="resetForm('barrio')" matSuffix mat-icon-button aria-label="Clear" matTooltip="Clear Text">
<i class="material-icons">clear</i>
</button>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-8">
<button id="btnClear" (click)="registrarCalle(boBand)" [disabled]="!frmCalle.valid" class="btn btn-block btnPrimario myBtnCard">
Save
</button>
</div>
<div class="col-md-4">
<button (click)="resetForm('')" mat-mini-fab class="btnFiltro" class="btnLimpiar" matTooltip="Clear Fields" matTooltipPosition="left"><i class="material-icons">clear</i></button>
</div>
</div>
</div>
</form>
And here is the TypeScript code:
mostrarDataCalle(stCalle: string) {
this.inputCalle = stCalle;
const objCalle = {
cal_nombre: stCalle
};
// QUERY TO GET ALL NEIGHBORHOODS FROM DATABASE
this.reclamoService.selectBarrioPorCalle(objCalle).subscribe(data => {
this.arrBarrio.forEach(element => {
// CODE TO SELECT CORRESPONDING NEIGHBORHOODS
});
});
}
And the Entity class:
export class Barrio {
bar_IDBarrio: number;
bar_nombre: string;
constructor() {}
}
Any suggestions on how to achieve this functionality?