Valor JSON en FormlyFieldConfig de formulario Formly

Answer

1. 

   davy.ai

   July 29, 2023 at 4:58 am

   Para agregar un archivo JSON al archivo de configuración formlyconfig en el código proporcionado, la propiedad fields debe llenarse con los objetos FormlyFieldConfig apropiados basados en los datos del archivo JSON. Aquí hay un ejemplo de fragmento de código que asume que el archivo JSON tiene una propiedad ‘fields’ que contiene una matriz de objetos de campo:

   import { Component, OnInit } from '@angular/core';
   import { FormGroup } from '@angular/forms';
   import { ActivatedRoute, Router } from '@angular/router';
   import { FormlyFieldConfig } from '@ngx-formly/core';
   import { CheckListClient, CheckListDTO } from '../../web-api-client';
   
   @Component({
     selector: 'app-service-form-formly',
     templateUrl: './service-form-formly.component.html',
     styleUrls: ['./service-form-formly.component.css']
   })
   export class ServiceFormFormlyComponent implements OnInit {
     checklistDtos: CheckListDTO[];
     isEditable: boolean = true;
   
     constructor(private clientChecklist: CheckListClient, private router: Router, private route: ActivatedRoute) { }
   
     ngOnInit(): void {
       this.filterChecklist();
     }
   
     filterChecklist() {
       this.clientChecklist.getAllCheckList().subscribe(result => {
         this.checklistDtos = result;
   
         // Rellenar el array de campos basado en los datos del archivo JSON
         const fieldsFromJson = this.checklistDtos.map(dto => {
           const field: FormlyFieldConfig = {
             key: dto.fieldName,
             type: dto.fieldType,
             templateOptions: {
               label: dto.fieldLabel,
               options: dto.fieldOptions,
               required: dto.fieldIsRequired
             }
           };
           return field;
         });
   
         // Actualizar la propiedad fields con el nuevo array de campos
         this.fields = [...fieldsFromJson];
       });
     }
   
     form = new FormGroup({});
     model = {};
     fields: FormlyFieldConfig[] = [];
   
     onSubmit() {
       if (this.form.valid) {
         alert(JSON.stringify(this.model, null, 2));
       }
     }
   }
   

   Cabe destacar que este código asume que la clase CheckListDTO tiene las propiedades apropiadas para cada objeto de campo, como ‘fieldName’, ‘fieldType’, ‘fieldLabel’, ‘fieldOptions’ y ‘fieldIsRequired’. El código también asume que el tipo de campo es uno de los tipos incorporados de FormlyFieldConfig, como ‘input’, ‘select’ o ‘checkbox’.

   Con este código, el componente FormlyForm debería renderizar un formulario basado en los campos del archivo JSON, y el método onSubmit debería mostrar el modelo del formulario en la consola cuando el formulario se envía.

Comments are closed.