Angular 8 Dynami c флажок и выпадающий из данных из API - PullRequest
0 голосов
/ 10 марта 2020

Вот мой стек блиц https://stackblitz.com/edit/angular-w8g8ng?file=src%2Fapp%2Fapp.component.html

Я хочу скрыть раскрывающийся список, если разделы пусты, а также значение раскрывающегося списка по умолчанию - первое. Как я могу это сделать? Пожалуйста, помогите.

<form [formGroup]='newEmployeeForm' class="w-60-l">
  <label [for]="i"  formArrayName="planDivList"
          *ngFor="let plan of newEmployeeForm.controls.planDivList.controls; let i = index"><br>

          <input [name]="i" [id]="i"  type="checkbox" [formControlName]="i">
          {{planDivList[i].planCode}}

          <label for="inputDiv">Divisions
            <select id="inputDiv" [(ngModel)]="division" (ngModelChange)="errMsg = ''"
              [ngModelOptions]="{standalone: true}" formcontrolName='divCtrl'>
              <option *ngFor="let division of planDivList[i].divisions">{{division.divisionName}}</option>
            </select>
          </label>

        </label>

        <div
          *ngIf="formInvalid && newEmployeeForm.controls.planDivList.hasError('required')">
        At least one plan must be selected
        </div>
</form>

Вот мой набор данных из API, который постоянно меняется

 planDivList = [
    { planCode: "B3692", divisions: [] },
    { planCode: "B3693", divisions: [] },
    { planCode: "B67", divisions: [{ divisionCode: "2", divisionName: "Assisted Living " }, { divisionCode: "1", divisionName: "LILC" }] },
    { planCode: "B69", divisions: [{ divisionCode: "3", divisionName: "Four Seasons" }, { divisionCode: "2", divisionName: "Lakeside" }, { divisionCode: "1", divisionName: "Sunrise" }] }

  ];    

1 Ответ

0 голосов
/ 10 марта 2020

Чтобы скрыть раскрывающийся список, необходимо добавить * ngIf в тег выбора, например, так:

<select *ngIf="planDivList[i].divisions.length > 0" id="inputDiv"...

И чтобы выбрать первое значение раскрывающегося списка, установите значение FormControl при его создании, например:

divCtrl: new FormControl(this.planDivList[0].divisions[0], [Validators.required])

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...