在数据库中存储 Angular 反应式表单验证规则

Question

我正在尝试从数据库重新加载我的表单，所有控件数据都存储在数据库中 (MySQL)。

我有一个如下所示的控件界面：

export class IFormControl {
    type: string;
    label: string;
    name: string;
    value?: string;
    disabled?: boolean;
    placeholder?: string;
    validation?: [];
    options?: [];
}

以及从 db 获取信息后在我的组件中应该是什么样子的示例：

    {
        type: 'input',
        label: 'Full name',
        name: 'name',
        placeholder: 'Enter your name',
        validation: [Validators.required, Validators.minLength(4)],
        disabled: false
    }

一切都很好，除了我不确定存储验证规则的最佳方式是什么？

目前我正在考虑将整条线调成一个字符串，然后将其原样存储在 db 'text' 字段中。然后当我取回它时，我会得到字符串 'Validators.required, Validators.minLength(4)'，然后将字符串推入数组 ['Validators.required, Validators.minLength(4)']，然后用正则表达式去掉所有引号 [Validators.required, Validators.minLength(4)]

这是最好的方法，还是有更好的方法来存储和获取验证器？

Answer 1

这只是一个想法（我没有时间编写代码）。

假设您有一个 json 喜欢

[
{
   type: 'input',
   label: 'Full name',
   name: 'name',
   placeholder: 'Enter your name',
   validation: '1,2',
   args:'null,3'
}
{
   type: 'input',
   label: 'Full name',
   name: 'name2',
   placeholder: 'Enter your name2',
   validation: '1,2',
   args:'null,3'
}
]

你可以有一个服务：

getFormModel()
{
  return httpClient.get("...").pipe(
    map(result=>{
      result.map(res=>{
         let validators=res.validation.split(,)
         let args=res.validation.split(,)
         let validator:any[]=[]
         for (let i=0;i<validators.length;i++)
         {
               switch (validators[i])
               {
                 case 1:
                    validator.push(Validators.required);
                    break;
                 case 2:
                    validator.push(Validators.MinLength(+args[i]);
                    break;
         }
         return 
         {
           type: res.type,
           label: res.label,
           name: res.name,
           placeholder: res.placeholder,
           validators:validator;
         }

      })
   })
)
}

当您订阅时，您可以创建一个 FormGroup 并将 FormGroup 的模型存储在模型中，例如

myservice.getFormModel().subscribe(result=>
     let controls:any={}
     result.forEach(res=>{
        controls[res.name]=new FormControl('', res.validators)
     }
     this.myForm=FormGroup(controls)
     this.model=result;
)

并显示为

<form formGroupName="myForm">
  <div *ngFor="let control in model">
      <input [formControlName]="control.name" 
             [placeholder]="control.placeholder"/>
  </div>
</form>

注意：一旦您拥有 "model"，您可以显示之类的控件（stackblitz 更复杂）

在数据库中存储 Angular 反应式表单验证规则

Storing Angular reactive form validation rules in a database

angular

angular-reactive-forms