Question

我正在使用以下dynamic form validation设置JSON。基于这些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

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

1 个答案: