ngFor循环中的Angular 5复选框验证答案

【问题标题】：Angular 5 checkbox validation in ngFor loopngFor循环中的Angular 5复选框验证
【发布时间】：2018-03-27 18:51:41
【问题描述】：

我正在使用 Angular 5，并且在 html 文件中我需要验证一个复选框以确保用户至少选中一个框。我能够得到一个错误，但不是我需要的方式。目前使用下面的代码，我在每个复选框选项之后都会收到一条错误消息，但在所有框之后我只需要一条消息。

<div class="form-group">

   <label for="options">Categories:</label>

     <label class = "control-label">

       <div *ngFor="let category of initialCategories">

         <input class = "form-control" type="checkbox" 
               name="categories" #categories="ngModel" value=" 
               {{category.name}}" [(ngModel)]="category.checked" 
               required/> {{category.name}}

               <div [hidden]="categories.valid || categories.pristine 
               ||!categories.dirty">
                    Please select at least one option.  
                </div>

       </div>

      </label>

</div>

如果我将div 放在ngFor div 之外显示错误，那么它将显示未找到错误，因为它在循环之外。

【问题讨论】：

我删除并取消删除了一个答案，因此您不会收到通知，但请检查我的答案是否适合您的需要:)

标签： angular checkbox angular5

【解决方案1】：

我们看不到您是否在此处使用NgForm 指令，但如果您不使用它，请使用它。

目前，您拥有的只是整个数组的一个表单控件，您可能希望每个值都有一个表单控件。所以我们要做的是添加一个动态名称，通过使用迭代的索引来实现。

我们可以在复选框上附加一个更改事件，并且每当单击一个复选框时，我们都会检查是否至少选中了一个。如果没有，我们为表单设置一个自定义错误。

从复选框的模板中删除required，导入NgForm 和ViewChild，以便我们在设置自定义错误时可以参考我们的表单。因此，将您的模板修改为：

<form #myForm="ngForm">
  <label for="options">Categories:</label>
    <label>
    <div *ngFor="let category of initialCategories; let i = index" >
      <input type="checkbox" name="categories{{i}}" #categories="ngModel" value="{{category.name}}" [(ngModel)]="category.checked" (change)="checkValidity()"/> {{category.name}}
    </div>
    </label>
    <div [hidden]="!myForm?.errors?.notValid">
        Please select at least one option.
    </div>
</form>

以及 TS 文件：

@ViewChild('myForm') myForm: NgForm;

checkValidity() {
  let valid = this.initialCategories.some(x => x.checked === true);
  if (valid) {
    this.myForm.form.setErrors(null);
  } else {
    this.myForm.form.setErrors({notValid: true});
  }
}

您可能还希望最初设置自定义错误，因此如果您愿意，可以在 OnInit 中进行设置。

这是一个 StackBlitz 演示上述代码。

【讨论】：