Как установить значения по умолчанию для выбора нескольких - PullRequest
Новая
       14

Как установить значения по умолчанию для выбора нескольких

0 голосов
/ 30 сентября 2019

У меня есть форма, в которой хранятся улицы с соответствующими районами:

StreetForm

Если я пытаюсь редактировать, я нажимаю кнопку на сетке ипоказать данные улицы:

enter image description here

Что я не могу сделать, так это то, что я автоматически выбираю окрестности, соответствующие улице, например, она должна выглядетьэто:

enter image description here

HTML: 

                    <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="Ingrese nombre de Calle">
                        <button *ngIf="inputCalle !== ''" mat-button (click)="resetForm('calle')" matSuffix mat-icon-button aria-label="Clear" matTooltip="Borrar texto">
                            <i class="material-icons">clear</i>
                        </button>

                        <br><br>

                        <label>BARRIO</label><br>
                        <mat-select formControlName="barrio" class="form-control inputAbm" [(ngModel)]="selectBar" placeholder="Seleccione Barrio" 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="Borrar texto">
                            <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">
                                    Guardar
                                </button>
                            </div>
                            <div class="col-md-4">
                                <button (click)="resetForm('')" mat-mini-fab class="btnFiltro" class="btnLimpiar" matTooltip="Limpiar campos" matTooltipPosition="left"><i class="material-icons">clear</i></button>
                            </div>
                        </div>
                    </div>

                </form>

TS: 

mostrarDataCalle(stCalle: string) {
this.inputCalle = stCalle;

const objCalle = {
  cal_nombre: stCalle
};

// HERE I BRING ALL THE NEIGHBORHOODS FROM DATABASE
this.reclamoService.selectBarrioPorCalle(objCalle).subscribe(data => {
  this.arrBarrio.forEach(element => {
    // HERE YOU SHOULD GO THROUGH THE SELECT AND SELECT THE CORRESPONDING NEIGHBORHOODS
  });
});
}

ENTITIE: 

export class Barrio {
   bar_IDBarrio: number;
   bar_nombre: string;
   constructor() {}
}

Есть идеи, как это сделать?

1 Ответ

0 голосов
/ 30 сентября 2019

создайте массив со значениями и используйте setValue для установки выбранных значений 

valuesToSelect = [];
mostrarDataCalle(stCalle: string) {
this.inputCalle = stCalle;

const objCalle = {
   cal_nombre: stCalle
 };

this.reclamoService.selectBarrioPorCalle(objCalle).subscribe(data => {
  this.arrBarrio.forEach(element => {
    // HERE YOU SHOULD GO THROUGH THE SELECT AND SELECT THE CORRESPONDING 
NEIGHBORHOODS
 element.forEach( x => this.valuesToSelect.push(x) )
 });
});
   this.frmCalle.get('barrio').setValue(this.valuesToSelect);
}
...