Angular 8 动态复选框和来自 api 的数据的下拉列表

Posted 2023-03-25

【中文标题】Angular 8 动态复选框和来自 api 的数据的下拉列表

【英文标题】：Angular 8 dynamic checkbox and dropdown from data from api

【发布时间】：2020-06-22 16:42:15

【问题描述】：

这是我的堆栈闪电战 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" ] 

  ];    

【问题讨论】：

这段代码真的很困惑，你将 ngForm 与响应式表单混合在一起，最好修改它。

【参考方案1】：

要隐藏下拉菜单，您需要在选择标签中添加 *ngIf，如下所示：

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

并且要选择下拉列表的第一个值，您在创建它时设置 formControl 的值，例如：

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

【讨论】：

隐藏有效但默认无效.. 我如何将值默认为每个下拉菜单中的第一个选项？此外，如果我在一个下拉列表中选择一个值，另一个下拉列表值将重置为空。这是我的代码。 stackblitz.com/edit/…

我做得对还是有其他方法可以实现我的目标？

您使用了错误的默认值，您在 HTML 中的选项值是一个数字 Value="division.divisionCode"，要修复它，我将 HTML 更改为 select 标签，获取正确的 formControl、<select id="inputDiv" [formControl]="newEmployeeForm?.controls.divCtrl"> <option *ngFor="let division of planDivList[i].divisions" [value]="division.divisionCode">division.divisionName</option> </select> 和TS 你需要添加默认值，比如 DivisionCode (1, 2, 3...) divCtrl: new FormControl(1, [Validators.required])

并且要处理当 divCtrl 值发生变化时，您需要添加这一行 this.newEmployeeForm.controls.divCtrl.valueChanges.subscribe((value) => console.log(value); );