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

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

angular checkbox

ngFor循环中的Angular 5复选框验证,angular,checkbox,angular5,Angular,Checkbox,Angular5,我使用angular 5，在html文件中，我需要验证一个复选框，以确保用户至少选中一个复选框。我可以得到一个错误，但不是在我需要的方式。目前，使用下面的代码，我在每个复选框选项后都会收到一条错误消息，但我只需要在所有复选框后显示一条消息 <div class="form-group"> <label for="options">Categories:</label> <label class = "control-label">

我使用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>


类别：
{{category.name}
请至少选择一个选项。

如果我将

div

放在

ngFor div

之外以显示错误，那么它将显示未找到的错误，因为它位于循环之外。

我们看不到您是否在这里使用

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>

您可能还希望在开始时设置自定义错误，因此可以在

OnInit

中进行设置

这里有一个演示上述代码。

我们看不出您是否在使用

NgForm

指令，但如果您没有使用它，请使用它