angular2 组件库NG-ZORRO如何对复选框做必填校验

发布于 2022-09-06 09:50:23 字数 1300 浏览 11 评论 0

当如下写法时,指定为必选,有办法校验么?当没选择时提示信息

html:

     <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label for="one" nz-form-item-required>复选测试</label>
        </div>
         <div nz-form-control nz-col [nzSpan]="10" >
          <nz-checkbox-group formControlName="one"  [(ngModel)]="oneOption" ></nz-checkbox-group>
          <div nz-form-explain *ngIf="getFormControl('one').dirty&&getFormControl('one').hasError('required')">通知范围必选</div>
        </div>
      </div>

ts:

validateForm: FormGroup;
oneOption: any;
constructor(
    private fb: FormBuilder,
 ){}
ngOnInit() {
    this.oneOption = [
    { label: 'Apple', value: 'Apple', checked: true },
    { label: 'Pear', value: 'Pear', checked: false },
    { label: 'Orange', value: 'Orange', checked: false },
    ]
    this.validateForm = this.fb.group({
         one: [null, [Validators.required]],
    })
}
  getFormControl(name) {
    return this.validateForm.controls[name];
  }

现在提交时打印发现this.validateForm.value.scopes包含oneOption完整信息,getFormControl('one').dirty为true,但getFormControl('one').hasError('required')一直为false

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

好菇凉咱不稀罕他 2022-09-13 09:50:24

找到方法了,自己手动自定义了一下对one的检测

姜生凉生 2022-09-13 09:50:24

建议[(ngModel)] 与formControlName 不要同时使用,

[(ngModel)]="oneOption"
    this.oneOption = [
    { label: 'Apple', value: 'Apple', checked: true },
    { label: 'Pear', value: 'Pear', checked: false },
    { label: 'Orange', value: 'Orange', checked: false },
    ]

这边明显有问题,

[(ngModel)]代表的是选中的值,而不是选项

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文