Storing Angular reactive form validation rules in a database

Question

I am trying to start loading my forms re-actively from a database, with all the data for the controls stored in the database (MySQL).

I have an interface for the controls that looks like this:

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

And and example of what this should look like in my component after getting the info from the db:

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

Everything is fine except I am not sure what would be the best way to store my validation rules?

At the moment I am thinking of just taking the whole line, tuning it into a string, and storing it as such in a db 'text' field. Then when I retrieve it back, I would get the string 'Validators.required, Validators.minLength(4)', and just push the string into an array ['Validators.required, Validators.minLength(4)'], and then with regex strip off all the quotation marks [Validators.required, Validators.minLength(4)]

Would this be the best way, or is there a better way to store and fetch the validators?

Personally I store in two variables validation (can be an integer) and args (string with the arguments). In the service, a map (or a foreach) and switch-case return the data with the array of validators — Eliseo
– Eliseo, Commented Jan 3, 2019 at 11:52
Do you maybe have an example of what you mean please? I just can't comprehend from the wording you use, and I have also tried up to now different other things that do not seem to work. — Alfa Bravo
– Alfa Bravo, Commented Jan 4, 2019 at 7:13
Its only an aprox of the problem, but I hope the answer help you to understand me. Well, I talk about a json, this json can be from a file, from a variable or from a dbs — Eliseo
– Eliseo, Commented Jan 4, 2019 at 7:49

Eliseo · Accepted Answer · 2019-01-04 07:59:43Z

It's only an idea (and I haven't time to code).

Imagine you has a json like

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

you can has a service:

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

      })
   })
)
}

when you subscribe you can create a FormGroup and store in model the model of the FormGroup like

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

And display like

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

NOTE: One time you has the "model" you can show the controls like the response of the question (the stackblitz is more complex)

Ah ok thanks, I think I have the gist of it now. Was starting to think it might be something like this. Thanks for the answer.

Collectives™ on Stack Overflow

Storing Angular reactive form validation rules in a database

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related