javascript - Cargando formulario dinámico desde JSON usando Angular 6

Estoy creando formularios dinámicos en Angular 6 utilizando el enlace, https://angular.io/guide/dynamic-form

Aquí he dado lo siguiente en question.service.ts,

 getQuestions() {

    let questions: DynamicBase<any>[] = [

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        type: 'text',
        value: '',
        required: true,
        order: 1
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2
      }),

      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Rating',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        order: 4
      }),
    ];

    return questions.sort((a, b) => a.order - b.order);
}

Aquí en lugar de

  new TextboxQuestion({
    key: 'firstName',
    label: 'First name',
    type: 'text',
    value: '',
    required: true,
    order: 1
  }),

Me gustaría cargar los datos desde el JSON,

"dynamicJSON": [
    {
        "key": "role_name",
        "label": "Role Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 1
    },
    {
        "key": "last_ame",
        "label": "Last Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 2
    }
]

Para lo cual he utilizado lo siguiente,

    let newArray = dynamicJSON;

    let questions: DynamicBase<any>[] = [    

    newArray.forEach(element => { 
        new TextboxQuestion(element)
    });

    ];

    return questions.sort((a, b) => a.order - b.order);

Dónde el elemento da el valor en la consola como,

{key: "role_name", label: "Role Name", type: "text", value: "", required: true, …}

Pero mientras tanto, estoy recibiendo el error como key of undefined.. Cuando hago un console de questions también se muestra como [undefined]..

¿Cómo pasar los valores dinámicos de JSON dentro del objeto de formulario como un cuadro de texto? Por favor, ayúdame a salir de esto, estoy atascado desde hace mucho tiempo..

Respuesta #1

He creado una aplicación de ejemplo, que está generando el formulario con validación basada en tu JSON dinámico. Por favor, consulta el ejemplo en Stackblitz: validación dinámica de formulario reactivo

He implementado el enfoque más corto (menos código) para generar el formulario dinámico.

Aquí está el código del componente:

ngOnInit(){
    this.sortDynamicJson();
    this.questionFormGroup = this.formBuilder.group({
      questions:this.formBuilder.array([])
    })
    this.generateForm()
  }

  generateForm(){
    this.dynamicJSON.forEach(t=>{
      let questions =<FormArray> this.questionFormGroup.controls["questions"]; 
     questions.push(this.formBuilder.group({
       value:[t.value,[t.required ? Validators.required:null]]
     }))
    })
  }

Como puedes ver en el código anterior, he generado el FormGroup con la propiedad value, porque otras propiedades no están relacionadas con el formulario.

Ahora he aplicado un bucle de objeto de arreglo dynamicJSON en el HTML y vincula el formulario.

Aquí está el código HTML:

<form >
  <div [formGroup]="questionFormGroup.controls.questions.controls[i]" *ngFor="let row of dynamicJSON; let i = index;">
<div class="form-group">
    <label>{{row.label}}</label>
    <input type="text" formControlName="value" class="form-control"  />
</div>
</div>
<<button [disabled]="!questionFormGroup.valid" class="btn btn-primary">Submit</button>

Por favor, házmelo saber si tienes alguna pregunta.

Respuesta #2

No estás agregando el objeto TextboxQustion en el array de preguntas. He creado un ejemplo de muestra en stackblitz, por favor revisa.

Aquí está el código ts.

let newArray = this.dynamicJSON;

    let questions: any = [    ]

    newArray.forEach(element => { 
        questions.push(element)
    });


    questions.sort((a, b) => a.order - b.order);