使用用 ngFor 填充的项目列表留下强制复选框

Question

我有一个包含项目的数组，我用它填充了一个 ngFor，它显示了我的项目列表和我的复选框，我需要进行验证，至少保留其中一个项目是强制性的。

一个例子是=如果一个复选框被选中而另一个未被选中，我不能取消选中被选中的复选框，我只需要禁用被选中的复选框，我只能取消选中它，如果我检查了未选中的复选框，因此它被启用等等。

我试过了

<div *ngFor="let item of dataList"\>
<input type="checkbox" [checked\]="item.checked" (change)="itemSelected($event, item)" [disabled]="notSelectCheck">

itemSelected(value, level ) {
level.checked = value.target.checked

const valuesChecked = this.dataList.filter((dt) =\> dt.checked).length;

valuesChecked \< 2 ? (this.notSelectCheck = true) : (this.notSelectCheck = false)

}

Answer 1

这将使最后一个复选框始终处于选中状态，并允许您选中任意多个复选框。您只需要计算已检查元素的数量，如果已检查的总数==1:

，则使用 preventDefault()

<div *ngFor="let element of elements; let i = index">
  <input
    name="elem{{ i }}"
    id="elem{{ i }}"
    [(ngModel)]="element.checked"
    type="checkbox"
    [checked]="element.checked"
    (click)="checkElement($event, i)"
  />
  <label for="elem{{ i }}">{{ element.text }}</label>
</div>

.ts

elements: any = [
    {
      checked: true,
      text: 'Element 1',
    },
    {
      checked: true,
      text: 'Element 2',
    },
    {
      checked: true,
      text: 'Element 3',
    },
    {
      checked: false,
      text: 'Element 4',
    },
  ];

  checkElement(e: any, index: number) {
    //checks if the user is checking or unchecking a checkbox
    if (!e.target.checked) {
      //if the user unchecked a checkbox, then I count the number of checked checkboxes
      let totalChecked = 0;
      for (let checked of this.elements) {
        if (checked.checked) {
          totalChecked = totalChecked + 1;
        }
      }
      //if the number of checked checkboxes is 1, then I cancel the uncheck action with e.preventDefault(), and reassign true to the unchecked value.
      if (totalChecked == 1) {
        e.preventDefault();
        this.elements[index].checked = true;
      }
    }
  }

使用用 ngFor 填充的项目列表留下强制复选框

leave a mandatory checkbox using a list of items populated with ngFor

logic

typescript

ngfor

angular