Question

我正在尝试从数据库中重新激活我的表单，所有控件的数据都存储在数据库（MySQL）中。

我有一个类似于以下控件的界面：

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

以及从数据库获取信息后在组件中应显示的示例：

    {
        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。

function buildNextValidDate(dateFormat = 'MMMM Do YYYY') {
  let dayIncrement = 1;

  if (moment().day() === 5) {
    // set to monday
    dayIncrement = 3;
  } else if (moment().day() === 6) {
    // set to monday
    dayIncrement = 2;
  }

  return moment().add(dayIncrement, 'd').format(dateFormat);
}

您可以享受服务：

[
{
   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'
}
]

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

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;
         }

      })
   })
)
}

并显示为

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

注意：一次有了“模型”，您可以显示诸如the response of the question之类的控件（堆栈闪电更复杂）

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

1 个答案: