angular2 组件库NG-ZORRO如何对复选框做必填校验
当如下写法时,指定为必选,有办法校验么?当没选择时提示信息
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
找到方法了,自己手动自定义了一下对one的检测
建议[(ngModel)] 与formControlName 不要同时使用,
这边明显有问题,
[(ngModel)]代表的是选中的值,而不是选项