ngFor循环

Question

我正在使用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之外的错误，那么它将显示未找到错误，因为它在循环之外。

Answer 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 演示上述代码。