Angular 复选框类型验证错误

Question

我有一个包含某些类型输入的表单。 checkbox 类型的验证有误。请参阅 stackblitz 演示。

首先检查第一项。然后选中第二个，然后取消选中第一个。它显示 错误消息 !

Html:

<form name="form" (ngSubmit)="addBookletForm.valid && addBooklet()" #addBookletForm="ngForm" novalidate >
  <label *ngFor="let option of levelCheckboxes">
    <div *ngIf="( booklet_level.touched || addBookletForm.submitted) && booklet_level.invalid && booklet_level.errors.required">
        <div class="saz-alert saz-alert-red saz-alert-small saz-color-red" *ngIf="booklet_level.errors.required">
          This is required!
        </div>
    </div>
    <input name="booklet_level" #booklet_level="ngModel" required value="{{option.value}}" [(ngModel)]="option.checked" type="checkbox">
    {{option.name}}

  </label>
</form>

打字稿：

levelCheckboxes = [
    { name:'one', value:'1', checked:false },
    { name:'two', value:'2', checked:false },
    { name:'three', value:'3', checked:false }
]

Answer 1

问题是您在每个复选框输入上使用相同的名称属性值，booklet_level。因为您使用的是 ngForm，所有 NgModels 都合并为一个。所以，你会得到非常奇怪和意想不到的行为。

如果您将名称更改为这样的名称，它将起作用：

<input name="booklet_level_{{option.name}}" required 
       type="checkbox" value="{{option.value}}" 
       [(ngModel)]="option.checked" #booklet_level="ngModel">

Answer 2

我已经了解您的需求。您的 html 可以修改为

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<div *ngIf="isChecked == false">
  Atleast one checkbox should be checked!
</div>
<form name="form" (ngSubmit)="addBookletForm.valid && addBooklet()" #addBookletForm="ngForm" novalidate >
  <label *ngFor="let option of levelCheckboxes">
     <input name="booklet_level" [(ngModel)]="option.checked" type="checkbox" (change)="isCheckBoxChecked()">
    {{option.name}}
  </label>
</form>

并且在您的 .ts 文件中，您可以有一个名为 isCheckBoxChecked() 的函数来显示相应的验证错误，

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isChecked: boolean = false;
  name = 'Angular';
  levelCheckboxes = [
        { name:'one', value:'1', checked:false },
        { name:'two', value:'2', checked:false },
        { name:'three', value:'3', checked:false }
    ]

  isCheckBoxChecked(){
    this.isChecked = false;
    this.levelCheckboxes.forEach(checkbox => {
      if(checkbox.checked){
        this.isChecked = true;
      }
    })
  }
}

希望对您有所帮助！

Angular 复选框类型验证错误

Angular wrong validation in checkbox type

angular

angular-forms