3

如何验证是否从 Angular 2 模板表单的复选框列表中选择了至少 1 个复选框?

HTML 代码。

   <div class="form-control" style="max-height: 300px; overflow: auto">
        <div *ngFor="let item of items" class="checkbox">
            <label for="{{item.id}}">
                <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" />
                <span class="text-body">{{item.name}}</span>
            </label>
        </div>
   </div>
   <div *ngIf="!isAtleastOneItemSelected()" class="alert alert-error">
        Select at least one item
   </div>

组件代码。

public isAtleastOneItemSelected() {
    const selectedItems = this.items.filter((item) => item.isSelected);
    if (selectedItems.length > 0) {
        return true;
    } else {
        return false;
    }
}

我已经在这里检查了 Reactive 形式的方法。所以,想检查我们如何在模板表单中做到这一点。使用我上面粘贴的代码,一切正常,但在页面加载时显示错误消息,因为那里没有检查脏或触摸。我被这个问题困住了。

对此的任何帮助将不胜感激。

谢谢。

4

2 回答 2

1

好吧,我在这里看到了两个可行的选择。我会选择第一个,只是因为我建议避免模板中的任何方法,因为您无法限制触发该方法的时间和频率。尤其是如果您有许多方法以某种方式修改数据的视图,该方法将被触发,即使它与实际的复选框无关。稍后寻找样品。

所以我要做的就是改变

*ngIf="!isAtleastOneItemSelected()"

改为检查变量:

*ngIf="nonChecked"

并在单击复选框时发生某种类型的更改事件,这会触发某种方法,例如:

check() {
  const selectedItems = this.items.filter((item) => item.isSelected === true);
  if (selectedItems.length > 0) {
     this.nonChecked = false;
  } else {
     this.nonChecked = true;
  }    
}

现在只有当复选框被触摸时才会触发。


如果您想保持类似的设置,我看到的另一个选项是将复选框包装在表单组中并观察何时触摸该组,然后只有在没有检查项目时才显示错误消息。因此,您可以将复选框包装在一个组中:

<div ngModelGroup="checkboxes">
  <!-- .... -->
</div>

然后你可以这样做:

<div *ngIf="!isAtleastOneItemSelected() && f.controls?.checkboxes?.dirty">
  Select at least one item
</div>  

f表单的名称在哪里。但如前所述,这将触发更改检测并在 DOM 中执行任何其他操作。这是此解决方案的示例,我们在 DOM 中只有一个其他字段(请参阅控制台),因此如果您有很多事情要做,我建议您使用第一个解决方案 :) 但无论哪种方式,两者都有效!

http://plnkr.co/edit/VuLNR8H3lasFoK7mRDlG?p=preview

于 2017-08-16T09:40:46.070 回答
0

看看这个,你需要适应:

<div *ngFor="let item of items; let i = index" class="checkbox"> 
        <label for="{{item.id}}">
            <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" (change)="CheckBoxChanged(i,$event)"/>
            <span class="text-body">{{item.name}}</span>
        </label>
 </div>
   <div [hidden]="isAtleastOneItemSelected()" class="alert alert-error">
        Select at least one item
   </div>

把你的检查逻辑放在这里......:

CheckBoxChanged(i,e){
    console.log(i);
    if (e.target.checked)
       console.log("checked");
    else 
       console.log("unchecked");
}
于 2017-08-15T20:42:11.980 回答