Angular NG-ZERRO form表单控件校验多选框_nz-form自定义验证-优快云博客

本文链接：https://blog.youkuaiyun.com/Asr_panpan/article/details/138196422

文章介绍了在Angular应用中使用nz-checkbox-group组件实现多选框的验证，包括初始化表单、设置验证规则（onesValidator）以确保至少有一个选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <div>
      <nz-form-label nzFor="" nzRequired>XX多选框</nz-form-label>
      <nz-form-control nzErrorTip="请选择">
        <nz-checkbox-group
          formControlName="checkboxName"
          [(ngModel)]="options"
        ></nz-checkbox-group>
      </nz-form-control>
    </div>
  </nz-form-item>
</form>

validateForm!: UntypedFormGroup;
 
 options = [
    { label: '选项1', value: '1', checked: false },
    { label: '选项2', value: '2', checked: false },
    { label: '选项3', value: '3', checked: false },
  ];    

ngOnInit():void {
    this.validateForm = this.fb.group({
      checkboxName:[null,this.onesValidator]
    })
  }
// 判断有些繁琐可根据自身需求调整
// 主要就是 return { required: true } 和 return null  , 前者显示提示后者隐藏
  onesValidator = (control: FormControl) => {
    if (((control.value && control.value.length > 0) ? control.value : []).filter((x: any) => x.checked == true).length != 0) {
      return null
    }
    return { required: ((control.value && control.value.length > 0) ? control.value : []).filter((x: any) => x.checked == true).length == 0 };
  }