如何动态使用复选框应用所需的验证

Question

我正在使用以下JSON 设置dynamic form validation。基于这些JSON，我使用以下JSON 格式创建了动态表单字段。

fields = [ { type: 'text', name: 'firstName', label: 'First Name', value: '', required: true, }, { type: 'checkbox', name: 'hobby', label: 'Hobby', required: true, options: [ { key: 'f', label: 'Fishing' }, { key: 'c', label: 'Cooking' } ] } ]

我的commponent.ts 文件正在关注

form: FormGroup;

ngOnInit() {
  let fieldsCtrls = {};
    for (let f of this.fields) {
      if (f.type != 'checkbox') {
        fieldsCtrls[f.name] = new FormControl(f.value || '', 
          Validators.required)
      } else {
        let opts = {};
        for (let opt of f.options) {
          opts[opt.key] = new FormControl(opt.value);
        }
       fieldsCtrls[f.name] = new FormGroup(opts)
     }
   }
   this.form = new FormGroup(fieldsCtrls);
}  

我已为所有输入字段应用required 验证，不包括checkbox。

如何在此代码中为复选框应用所需的验证？

Answer 1

Bhagwat，你在选项中没有“价值”。你需要决定你想得到什么。您的代码创建了一个为您提供值的 FormGroup，例如

{firsName:"firstName",hobby:{f:true,c:false}}

但你可以得到一些喜欢

{firsName:"firstName",hobby:[true,false]}

或者

{firsName:"firstName",hobby:['f']}

在所有情况下，您都需要创建一个 customValidator，并且您需要决定如何显示表单。对于第一种情况，您在 formGroup 上创建验证器

 //when you create the formGroup of options
 fieldsCtrls[f.name] = new FormGroup(opts,this.oneRequiredValidator())

//I decided create the validator in the own component
oneRequiredValidator() {
    return (formGroup) => {
      if (!formGroup)
        return null;
      let oneChecked = false;
      for (let key in formGroup.value)
        oneChecked = oneChecked || formGroup.value[key]
      return oneChecked ? null : { error: 'one required' }
    }
  }

关于最后一个选项（返回一个数组）我前段时间做了一个自定义组件，见answer in stackblitz