PO-UI JSON Forms

https://github.com/yuriduartetotvs/po-ui-json-forms-lib
Admin
An Angular library that integrates PO-UI with NGX Formly to create dynamic forms through JSON...
Tokens:15,286
Snippets:63
Trust Score:3.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install PO-UI JSON Forms and Dependencies

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/USAGE.md

This command installs the PO-UI JSON Forms library along with its peer dependencies, @po-ui/ng-components and @ngx-formly/core. Ensure your project meets the specified version requirements for these packages.

```bash
npm install po-ui-json-forms @po-ui/ng-components @ngx-formly/core
```

--------------------------------

### PO UI JSON Form Configuration Example

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

Demonstrates the JSON structure for defining form fields using PO UI components. It includes examples for checkboxes, date pickers, multiselects, and switches, specifying their types, properties, and options.

```typescript
[
    {
      key: 'newsletter',
      type: 'po-checkbox',
      props: {
        label: 'Aceito receber newsletter',
        description: 'Marque para receber nossas novidades por e-mail'
      }
    },
    {
      key: 'termos',
      type: 'po-checkbox',
      props: {
        label: 'Aceito os termos de uso',
        required: true,
        description: 'É obrigatório aceitar os termos para continuar'
      }
    },
    {
      key: 'periodoFerias',
      type: 'po-datepicker-range',
      props: {
        label: 'Período de Férias',
        required: false,
        description: 'Selecione o período desejado para suas férias'
      }
    },
    {
      key: 'tecnologias',
      type: 'po-multiselect',
      props: {
        label: 'Tecnologias',
        placeholder: 'Selecione as tecnologias que conhece',
        options: [
          { label: 'Angular', value: 'angular' },
          { label: 'React', value: 'react' },
          { label: 'Vue.js', value: 'vue' },
          { label: 'Node.js', value: 'node' },
          { label: 'Python', value: 'python' },
          { label: 'Java', value: 'java' },
          { label: 'C#', value: 'csharp' },
          { label: 'JavaScript', value: 'javascript' },
          { label: 'TypeScript', value: 'typescript' },
          { label: 'PHP', value: 'php' }
        ],
        description: 'Selecione múltiplas tecnologias que você conhece'
      }
    },
    {
      key: 'notificacoes',
      type: 'po-switch',
      props: {
        label: 'Ativar Notificações',
        description: 'Ative para receber notificações push'
      }
    }
  ];
```

--------------------------------

### Access Form Templates with FormConfigService (TypeScript)

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/USAGE.md

Demonstrates how to inject and use the FormConfigService to retrieve pre-defined form templates. It shows how to get all available templates and how to fetch a specific template by its name. This service is essential for dynamically generating forms based on predefined configurations.

```typescript
import { FormConfigService } from 'po-ui-json-forms';

constructor(private formConfigService: FormConfigService) {}

ngOnInit() {
  const templates = this.formConfigService.getTemplates();
  const userTemplate = this.formConfigService.getTemplateByName('Cadastro de Usuário');
}
```

--------------------------------

### Basic PO-UI JSON Forms Usage Example

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/USAGE.md

This Angular component demonstrates a basic implementation of PO-UI JSON Forms. It defines a form group, model, and an array of `FormlyFieldConfig` objects to render input fields for name, email, and age. The `onSubmit` method logs the form data.

```typescript
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-exemplo',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form 
        [form]="form" 
        [fields]="fields" 
        [model]="model">
      </formly-form>
      <po-button p-label="Enviar" p-type="submit"></po-button>
    </form>
  `
})
export class ExemploComponent {
  form = new FormGroup({});
  model: any = {};
  
  fields: FormlyFieldConfig[] = [
    {
      key: 'nome',
      type: 'po-input',
      props: {
        label: 'Nome Completo',
        placeholder: 'Digite seu nome completo',
        required: true,
        description: 'Informe seu nome completo'
      }
    },
    {
      key: 'email',
      type: 'po-email',
      props: {
        label: 'E-mail',
        placeholder: 'exemplo@email.com',
        required: true
      }
    },
    {
      key: 'idade',
      type: 'po-number',
      props: {
        label: 'Idade',
        min: 18,
        max: 120
      }
    }
  ];

  onSubmit() {
    console.log('Dados do formulário:', this.model);
  }
}
```

--------------------------------

### PO UI JSON Form Field Configuration: Custom Validation

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

Configuration for an input field ('po-input') with a custom validation rule. This example shows how to apply a 'cpf' validator to an input field, along with a mask for the input format and 'required' validation.

```typescript
{
  key: 'cpf',
  type: 'po-input',
  props: {
    label: 'CPF',
    mask: '999.999.999-99',
    required: true
  },
  validators: {
    validation: ['cpf']
  }
}
```

--------------------------------

### PO-UI JSON Forms Peer Dependencies Configuration

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/README.md

This JSON object outlines the required peer dependencies for the PO-UI JSON Forms library. It specifies the compatible Angular versions, NGX Formly core, PO-UI Angular components, and RxJS. Ensure these versions are installed in your project.

```json
{
  "@angular/common": "^19.0.0",
  "@angular/core": "^19.0.0",
  "@angular/forms": "^19.0.0",
  "@ngx-formly/core": "^7.0.0",
  "@po-ui/ng-components": ">=19.0.0",
  "rxjs": "~7.8.0"
}
```

--------------------------------

### Date Range Selector (po-datepicker-range) - TypeScript

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Configures a date range selector component for selecting a start and end date. Supports labels, required fields, locale settings, and date constraints like minDate and maxDate. The output is an object with 'start' and 'end' date properties.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'periodoFerias',
    type: 'po-datepicker-range',
    props: {
      label: 'Período de Férias',
      required: false,
      clean: true,
      locale: 'pt-BR',
      help: 'Selecione o período de férias desejado',
      description: 'Selecione o período desejado para suas férias'
    }
  },
  {
    key: 'vigenciaContrato',
    type: 'po-datepicker-range',
    props: {
      label: 'Vigência do Contrato',
      required: true,
      minDate: '2024-01-01',
      maxDate: '2026-12-31'
    }
  }
];
// Saída esperada: { "periodoFerias": { "start": "2024-07-01", "end": "2024-07-30" }, "vigenciaContrato": { "start": "2024-01-01", "end": "2025-12-31" } }
```

--------------------------------

### Configure PO-UI JSON Forms in Angular Standalone Bootstrap

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

Configures the PO-UI JSON Forms module and custom Formly types within the Angular application's standalone bootstrap process. This setup is essential for enabling dynamic forms using PO-UI components with NGX Formly.

```typescript
import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { FormlyModule } from '@ngx-formly/core';
import {
  PoUiJsonFormsModule,
  PO_UI_FORMLY_TYPES,
  FormlyFieldPoInput,
  FormlyFieldPoNumber,
  FormlyFieldPoEmail,
  FormlyFieldPoPassword,
  FormlyFieldPoTextarea,
  FormlyFieldPoSelect,
  FormlyFieldPoDatepicker,
  FormlyFieldPoDatepickerRange,
  FormlyFieldPoCheckboxGroup,
  FormlyFieldPoRadioGroup,
  FormlyFieldPoCombo,
  FormlyFieldPoCheckbox,
  FormlyFieldPoLookup,
  FormlyFieldPoMultiselect,
  FormlyFieldPoSwitch
} from 'po-ui-json-forms';

import { routes } from './app.routes';

const FORMLY_TYPES_CONFIG = [
  { name: 'po-input', component: FormlyFieldPoInput },
  { name: 'po-number', component: FormlyFieldPoNumber },
  { name: 'po-email', component: FormlyFieldPoEmail },
  { name: 'po-password', component: FormlyFieldPoPassword },
  { name: 'po-textarea', component: FormlyFieldPoTextarea },
  { name: 'po-select', component: FormlyFieldPoSelect },
  { name: 'po-datepicker', component: FormlyFieldPoDatepicker },
  { name: 'po-datepicker-range', component: FormlyFieldPoDatepickerRange },
  { name: 'po-checkbox-group', component: FormlyFieldPoCheckboxGroup },
  { name: 'po-radio-group', component: FormlyFieldPoRadioGroup },
  { name: 'po-combo', component: FormlyFieldPoCombo },
  { name: 'po-checkbox', component: FormlyFieldPoCheckbox },
  { name: 'po-lookup', component: FormlyFieldPoLookup },
  { name: 'po-multiselect', component: FormlyFieldPoMultiselect },
  { name: 'po-switch', component: FormlyFieldPoSwitch }
];

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(
      PoUiJsonFormsModule.forRoot(),
      FormlyModule.forRoot({
        types: FORMLY_TYPES_CONFIG
      })
    )
  ]
};

```

--------------------------------

### Configure PO Switch for Toggle Functionality

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Shows how to set up the 'po-switch' component for simple on/off toggling. This includes defining labels for both states, descriptions, and positioning. The expected output is a boolean value indicating the switch state.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'notificacoes',
    type: 'po-switch',
    props: {
      label: 'Ativar Notificações',
      description: 'Ative para receber notificações push',
      labelOn: 'Sim',
      labelOff: 'Não',
      formatModel: true,
      hideLabelStatus: false,
      labelPosition: 'right'
    }
  },
  {
    key: 'modoEscuro',
    type: 'po-switch',
    props: {
      label: 'Modo Escuro',
      labelOn: 'Ativado',
      labelOff: 'Desativado'
    }
  }
];
// Saída esperada: { "notificacoes": true, "modoEscuro": false }
```

--------------------------------

### Exemplo de Componente Angular com PO-UI JSON Forms

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Este snippet demonstra um componente Angular que utiliza PO-UI JSON Forms para definir e gerenciar um formulário. Ele inclui a definição dos campos do formulário, a lógica de submissão e um exemplo da saída esperada em formato JSON.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.css']
})
export class FormExampleComponent {
  model = {};
  form = {
    fields: [
      {
        type: 'input',
        key: 'nome',
        templateOptions: {
          label: 'Nome',
          required: true
        }
      },
      {
        type: 'input',
        key: 'email',
        templateOptions: {
          label: 'Email',
          type: 'email',
          required: true
        }
      },
      {
        type: 'input',
        key: 'idade',
        templateOptions: {
          label: 'Idade',
          type: 'number',
          required: true
        }
      },
      {
        type: 'select',
        key: 'estado',
        templateOptions: {
          label: 'Estado',
          options: [
            { label: 'São Paulo', value: 'SP' },
            { label: 'Rio de Janeiro', value: 'RJ' },
            { label: 'Minas Gerais', value: 'MG' }
          ],
          required: true
        }
      },
      {
        type: 'datepicker',
        key: 'nascimento',
        templateOptions: {
          label: 'Data de Nascimento',
          required: true
        }
      },
      {
        type: 'checkbox',
        key: 'newsletter',
        templateOptions: {
          label: 'Receber Newsletter'
        }
      },
      {
        type: 'radio',
        key: 'genero',
        templateOptions: {
          label: 'Gênero',
          options: [
            { label: 'Masculino', value: 'M' },
            { label: 'Feminino', value: 'F' }
          ]
        }
      },
      {
        type: 'textarea',
        key: 'biografia',
        templateOptions: {
          label: 'Biografia',
          rows: 5
        }
      },
      {
        type: 'po-tag',
        key: 'tecnologias',
        templateOptions: {
          label: 'Tecnologias',
          placeholder: 'Adicione tecnologias'
        }
      },
      {
        type: 'po-checkbox',
        key: 'notificacoes',
        props: {
          label: 'Ativar Notificações'
        }
      },
      {
        className: 'po-md-4',
        key: 'termos',
        type: 'po-checkbox',
        props: {
          label: 'Aceito os termos',
          required: true
        }
      }
    ]
  };

  onSubmit() {
    if (this.form.valid) {
      console.log('Dados válidos:', this.model);
      alert('Formulário enviado com sucesso!');
    } else {
      console.log('Formulário inválido');
      alert('Por favor, preencha todos os campos obrigatórios.');
    }
  }
}

```

--------------------------------

### Configure PO Multiselect for Multiple Option Selection

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Demonstrates how to configure the 'po-multiselect' component for selecting multiple options. It includes setting labels, placeholders, options, and search behavior. The expected output is an object with selected values.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'tecnologias',
    type: 'po-multiselect',
    props: {
      label: 'Tecnologias',
      placeholder: 'Selecione as tecnologias que conhece',
      options: [
        { label: 'Angular', value: 'angular' },
        { label: 'React', value: 'react' },
        { label: 'Vue.js', value: 'vue' },
        { label: 'Node.js', value: 'node' },
        { label: 'Python', value: 'python' },
        { label: 'Java', value: 'java' },
        { label: 'C#', value: 'csharp' },
        { label: 'JavaScript', value: 'javascript' },
        { label: 'TypeScript', value: 'typescript' },
        { label: 'PHP', value: 'php' }
      ],
      description: 'Selecione múltiplas tecnologias que você conhece',
      sort: true,
      hideSearch: false,
      placeholderSearch: 'Buscar tecnologia...',
      autoHeight: true
    }
  },
  {
    key: 'participantes',
    type: 'po-multiselect',
    props: {
      label: 'Participantes da Reunião',
      placeholder: 'Selecione os participantes',
      required: true,
      options: [
        { label: 'João Silva', value: 'joao.silva' },
        { label: 'Maria Santos', value: 'maria.santos' },
        { label: 'Pedro Oliveira', value: 'pedro.oliveira' },
        { label: 'Ana Costa', value: 'ana.costa' }
      ]
    }
  }
];
// Saída esperada: { "tecnologias": ["angular", "typescript", "node"], "participantes": ["joao.silva", "maria.santos"] }
```

--------------------------------

### Formulário Completo com Layout em TypeScript (Angular)

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Componente Angular que utiliza PO-UI e Formly para criar um formulário completo com layout organizado em colunas. Ele gerencia o estado do formulário, a exibição dos campos e a submissão dos dados.

```typescript
import { Component } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
import { PoModule } from '@po-ui/ng-components';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-formulario-completo',
  imports: [ReactiveFormsModule, FormlyModule, PoModule, CommonModule],
  template: `
    <po-page-default p-title="Cadastro Completo">
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <formly-form
          [form]="form"
          [fields]="fields"
          [model]="model"
          [options]="options">
        </formly-form>

        <div class="po-row">
          <po-button
            class="po-md-3"
            p-label="Submeter"
            p-type="primary"
            type="submit"
            [p-disabled]="!form.valid">
          </po-button>

          <po-button
            class="po-md-3 po-ml-1"
            p-label="Limpar"
            p-type="default"
            (p-click)="form.reset(); model = {}">
          </po-button>
        </div>
      </form>

      <div class="po-mt-3">
        <strong>Dados do formulário:</strong>
        <pre>{{ model | json }}</pre>
      </div>
    </po-page-default>
  `
})
export class FormularioCompletoComponent {
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};

  fields: FormlyFieldConfig[] = [
    // Primeira linha - Nome e E-mail
    {
      fieldGroupClassName: 'po-row',
      fieldGroup: [
        {
          className: 'po-md-6',
          key: 'nome',
          type: 'po-input',
          props: {
            label: 'Nome Completo',
            placeholder: 'Digite seu nome completo',
            required: true
          }
        },
        {
          className: 'po-md-6',
          key: 'email',
          type: 'po-email',
          props: {
            label: 'E-mail',
            placeholder: 'exemplo@email.com',
            required: true
          }
        }
      ]
    },
    // Segunda linha - Idade, Estado e Data de Nascimento
    {
      fieldGroupClassName: 'po-row',
      fieldGroup: [
        {
          className: 'po-md-4',
          key: 'idade',
          type: 'po-number',
          props: {
            label: 'Idade',
            min: 18,
            max: 120,
            required: true
          }
        },
        {
          className: 'po-md-4',
          key: 'estado',
          type: 'po-select',
          props: {
            label: 'Estado',
            placeholder: 'Selecione',
            options: [
              { label: 'São Paulo', value: 'SP' },
              { label: 'Rio de Janeiro', value: 'RJ' },
              { label: 'Minas Gerais', value: 'MG' }
            ],
            required: true
          }
        },
        {
          className: 'po-md-4',
          key: 'nascimento',
          type: 'po-datepicker',
          props: {
            label: 'Data de Nascimento',
            format: 'dd/mm/yyyy',
            required: true
          }
        }
      ]
    },
    // Terceira linha - Tecnologias e Gênero
    {
      fieldGroupClassName: 'po-row',
      fieldGroup: [
        {
          className: 'po-md-6',
          key: 'tecnologias',
          type: 'po-multiselect',
          props: {
            label: 'Tecnologias',
            placeholder: 'Selecione',
            options: [
              { label: 'Angular', value: 'angular' },
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' },
              { label: 'Node.js', value: 'node' }
            ]
          }
        },
        {
          className: 'po-md-6',
          key: 'genero',
          type: 'po-radio-group',
          props: {
            label: 'Gênero',
            options: [
              { label: 'Masculino', value: 'M' },
              { label: 'Feminino', value: 'F' },
              { label: 'Outro', value: 'O' }
            ],
            required: true
          }
        }
      ]
    },
    // Quarta linha - Biografia
    {
      fieldGroupClassName: 'po-row',
      fieldGroup: [
        {
          className: 'po-md-12',
          key: 'biografia',
          type: 'po-textarea',
          props: {
            label: 'Biografia',
            placeholder: 'Conte sobre você...', 
            rows: 4,
            maxLength: 500
          }
        }
      ]
    },
    // Quinta linha - Switches e Checkbox
    {
      fieldGroupClassName: 'po-row',
      fieldGroup: [
        {
          className: 'po-md-4',
          key: 'newsletter',
          type: 'po-switch',
          props: {
            label: 'Receber Newsletter'
          }
        },
        {
          className: 'po-md-4',
          key: 'notificacoes',
          type: 'po-switch',
          props: {
            label: 'Receber Notificações'
          }
        }
      ]
    }
  ];

  onSubmit() {
    console.log('Form submitted:', this.model);
  }
}

```

--------------------------------

### Angular Component for Form Templates using FormConfigService

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

This Angular component demonstrates how to use the FormConfigService to load, display, and interact with pre-defined form templates. It utilizes Formly for rendering and PO UI components for user interaction. Dependencies include @angular/core, @angular/forms, @ngx-formly/core, @po-ui/ng-components, and po-ui-json-forms.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
import { PoModule } from '@po-ui/ng-components';
import { FormConfigService, FormTemplate } from 'po-ui-json-forms';

@Component({
  selector: 'app-templates-exemplo',
  imports: [ReactiveFormsModule, FormlyModule, PoModule],
  template: `
    <div class="po-row">
      <div class="po-md-3" *ngFor="let template of templates">
        <po-button
          [p-label]="template.name"
          (p-click)="carregarTemplate(template)">
        </po-button>
      </div>
    </div>

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <po-button p-label="Enviar" p-type="primary" [p-disabled]="!form.valid"></po-button>
    </form>
  `
})
export class TemplatesExemploComponent implements OnInit {
  form = new FormGroup({});
  model: any = {};
  fields: FormlyFieldConfig[] = [];
  templates: FormTemplate[] = [];

  constructor(private formConfigService: FormConfigService) {}

  ngOnInit() {
    // Obter todos os templates disponíveis
    this.templates = this.formConfigService.getTemplates();
    // Templates disponíveis: 'Cadastro de Usuário', 'Formulário de Contato',
    // 'Pesquisa de Satisfação', 'Agendamento de Reunião'

    // Obter template específico por nome
    const cadastroUsuario = this.formConfigService.getTemplate('Cadastro de Usuário');
    if (cadastroUsuario) {
      this.fields = cadastroUsuario.fields;
    }

    // Obter tipos de campos disponíveis com suas propriedades
    const tiposDisponiveis = this.formConfigService.getAvailableFieldTypes();
    console.log('Tipos disponíveis:', tiposDisponiveis);

    // Validar configuração JSON
    const configValida = this.formConfigService.validateFieldConfig(this.fields);
    console.log('Configuração válida:', configValida);

    // Obter configuração de exemplo
    const exemploConfig = this.formConfigService.getExampleConfig();
    console.log('Exemplo:', exemploConfig);
  }

  carregarTemplate(template: FormTemplate) {
    this.fields = template.fields;
    this.model = {};
    this.form = new FormGroup({});
  }

  onSubmit() {
    console.log('Dados:', this.model);
  }
}

```

--------------------------------

### Exemplo de Campo de Texto com PO-UI JSON Forms

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Demonstra a criação de um campo de texto (po-input) utilizando PO-UI JSON Forms. Inclui configurações para label, placeholder, obrigatoriedade, descrição e máscara.

```typescript
import { Component } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
import { PoModule } from '@po-ui/ng-components';

@Component({
  selector: 'app-input-exemplo',
  imports: [ReactiveFormsModule, FormlyModule, PoModule],
  template: `
    <form [formGroup]="form">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
    </form>
    <pre>Valor: {{ model | json }}</pre>
  `
})
export class InputExemploComponent {
  form = new FormGroup({});
  model: any = {};

  fields: FormlyFieldConfig[] = [
    {
      key: 'nome',
      type: 'po-input',
      props: {
        label: 'Nome Completo',
        placeholder: 'Digite seu nome completo',
        required: true,
        description: 'Informe seu nome completo',
        maxLength: 100
      }
    },
    {
      key: 'cpf',
      type: 'po-input',
      props: {
        label: 'CPF',
        placeholder: '000.000.000-00',
        mask: '999.999.999-99',
        required: true
      }
    },
    {
      key: 'telefone',
      type: 'po-input',
      props: {
        label: 'Telefone',
        placeholder: '(11) 99999-9999',
        mask: '(99) 99999-9999'
      }
    }
  ];
}
// Saída esperada: { "nome": "João Silva", "cpf": "123.456.789-00", "telefone": "(11) 98765-4321" }

```

--------------------------------

### PO-UI JSON Forms - Select Field Configuration

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/USAGE.md

This JSON snippet shows the configuration for a 'po-select' field. It includes properties for the field's key, type, label, placeholder, options, and a required flag. The options are provided as an array of objects with 'label' and 'value' properties.

```json
{
  "key": "estado",
  "type": "po-select",
  "props": {
    "label": "Estado",
    "placeholder": "Selecione um estado",
    "options": [
      { "label": "São Paulo", "value": "SP" },
      { "label": "Rio de Janeiro", "value": "RJ" },
      { "label": "Minas Gerais", "value": "MG" }
    ],
    "required": true
  }
}
```

--------------------------------

### Configure PO Lookup for Advanced Record Selection

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Illustrates the configuration of the 'po-lookup' component for advanced searching and selection of records. It details setting up API endpoints, display columns, and filtering options. The expected output is an object with selected record values.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'sala',
    type: 'po-lookup',
    props: {
      label: 'Sala de Reunião',
      placeholder: 'Buscar sala',
      required: true,
      fieldLabel: 'nome',
      fieldValue: 'id',
      columns: [
        { property: 'id', label: 'ID' },
        { property: 'nome', label: 'Nome da Sala' },
        { property: 'capacidade', label: 'Capacidade' }
      ],
      autoHeight: true,
      infiniteScroll: true,
      clean: true,
      filterService: 'https://api.exemplo.com/salas'
    }
  },
  {
    key: 'cliente',
    type: 'po-lookup',
    props: {
      label: 'Cliente',
      placeholder: 'Buscar cliente',
      fieldLabel: 'razaoSocial',
      fieldValue: 'cnpj',
      columns: [
        { property: 'cnpj', label: 'CNPJ' },
        { property: 'razaoSocial', label: 'Razão Social' },
        { property: 'cidade', label: 'Cidade' }
      ],
      filterService: 'https://api.exemplo.com/clientes'
    }
  }
];
// Saída esperada: { "sala": "sala-01", "cliente": "12345678000199" }
```

--------------------------------

### Configure PO-UI JSON Forms Module (Angular 17+)

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/USAGE.md

This TypeScript code demonstrates how to import and configure the PoUiJsonFormsModule and FormlyModule in your Angular application's `app.config.ts` file. It sets up the necessary providers for routing, HTTP client, and formly types.

```typescript
import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { FormlyModule } from '@ngx-formly/core';
import { PoUiJsonFormsModule, PO_UI_FORMLY_TYPES } from 'po-ui-json-forms';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(
      PoUiJsonFormsModule.forRoot(),
      FormlyModule.forRoot({
        types: PO_UI_FORMLY_TYPES
      })
    )
  ]
};
```

--------------------------------

### PO UI JSON Form Field Configuration: Select with Options

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

Configuration for a select dropdown field ('po-select') with predefined options. It includes the field's key, label, 'required' validation, and an 'options' array, where each option has a 'label' and a 'value'.

```typescript
{
  key: 'categoria',
  type: 'po-select',
  props: {
    label: 'Categoria',
    required: true,
    options: [
      { label: 'Tecnologia', value: 'tech' },
      { label: 'Saúde', value: 'health' },
      { label: 'Educação', value: 'education' }
    ]
  }
}
```

--------------------------------

### Configuração NgModule com PO-UI JSON Forms (Angular Antigo)

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Este snippet mostra como configurar o PO-UI JSON Forms em um projeto Angular que utiliza o padrão NgModule, em vez de standalone components. É necessário importar os módulos relevantes e configurar o FormlyModule.

```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { PoModule } from '@po-ui/ng-components';
import { PoUiJsonFormsModule, PO_UI_FORMLY_TYPES } from 'po-ui-json-forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    PoModule,
    PoUiJsonFormsModule.forRoot(),
    FormlyModule.forRoot({
      types: PO_UI_FORMLY_TYPES
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

--------------------------------

### Configure PO-UI Form Fields in TypeScript

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/projects/po-ui-json-forms/README.md

This TypeScript code defines an array of form field configurations for a PO UI JSON form. It includes various field types like checkboxes, date pickers, multiselects, and switches, each with specific properties for labels, descriptions, and options.

```typescript
const fields = [
    {
      key: 'newsletter',
      type: 'po-checkbox',
      props: {
        label: 'Aceito receber newsletter',
        description: 'Marque para receber nossas novidades por e-mail'
      }
    },
    {
      key: 'termos',
      type: 'po-checkbox',
      props: {
        label: 'Aceito os termos de uso',
        required: true,
        description: 'É obrigatório aceitar os termos para continuar'
      }
    },
    {
      key: 'periodoFerias',
      type: 'po-datepicker-range',
      props: {
        label: 'Período de Férias',
        required: false,
        description: 'Selecione o período desejado para suas férias'
      }
    },
    {
      key: 'tecnologias',
      type: 'po-multiselect',
      props: {
        label: 'Tecnologias',
        placeholder: 'Selecione as tecnologias que conhece',
        options: [
          { label: 'Angular', value: 'angular' },
          { label: 'React', value: 'react' },
          { label: 'Vue.js', value: 'vue' },
          { label: 'Node.js', value: 'node' },
          { label: 'Python', value: 'python' },
          { label: 'Java', value: 'java' },
          { label: 'C#', value: 'csharp' },
          { label: 'JavaScript', value: 'javascript' },
          { label: 'TypeScript', value: 'typescript' },
          { label: 'PHP', value: 'php' }
        ],
        description: 'Selecione múltiplas tecnologias que você conhece'
      }
    },
    {
      key: 'notificacoes',
      type: 'po-switch',
      props: {
        label: 'Ativar Notificações',
        description: 'Ative para receber notificações push'
      }
    }
  ];

  onSubmit() {
    if (this.form.valid) {
      console.log('Dados:', this.model);
    }
  }
```

--------------------------------

### PO UI JSON Form Field Configuration: Simple Input

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

Configuration for a simple text input field using the 'po-input' type. It defines the field's key, label, placeholder, and validation rules like 'required' and 'maxLength'.

```typescript
{
  key: 'nome',
  type: 'po-input',
  props: {
    label: 'Nome',
    placeholder: 'Digite seu nome',
    required: true,
    maxLength: 100
  }
}
```

--------------------------------

### Complete PO-UI Form Configuration in TypeScript

Source: https://github.com/yuriduartetotvs/po-ui-json-forms-lib/blob/main/README.md

This TypeScript code defines a complete Angular component that utilizes Formly and PO-UI components to render a dynamic form. It includes various field types like text inputs, email, password, number, date picker, select, combo, radio group, checkbox group, and textarea, demonstrating their configuration with labels, placeholders, validation rules, and options. Dependencies include Angular, Formly, and PO-UI modules.

```typescript
import { Component } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
import { PoModule } from '@po-ui/ng-components';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [ReactiveFormsModule, FormlyModule, PoModule, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'JSON PO-UI Form Generator';
  
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};

  // Configuração usando diferentes tipos do PO-UI
  fields: FormlyFieldConfig[] = [
    {
      key: 'nome',
      type: 'po-input',
      props: {
        label: 'Nome Completo',
        placeholder: 'Digite seu nome completo',
        required: true,
        description: 'Informe seu nome completo'
      }
    },
    {
      key: 'sobrenome',
      type: 'po-input',
      props: {
        label: 'Sobrenome',
        placeholder: 'Digite seu sobrenome',
        required: false
      }
    },
    {
      key: 'email',
      type: 'po-email',
      props: {
        label: 'E-mail',
        placeholder: 'Digite seu e-mail',
        required: true,
        description: 'Informe um e-mail válido'
      }
    },
    {
      key: 'senha',
      type: 'po-password',
      props: {
        label: 'Senha',
        placeholder: 'Digite sua senha',
        required: true,
        minLength: 8,
        description: 'A senha deve ter pelo menos 8 caracteres'
      }
    },
    {
      key: 'idade',
      type: 'po-number',
      props: {
        label: 'Idade',
        placeholder: 'Digite sua idade',
        required: true,
        min: 18,
        max: 120,
        description: 'Informe sua idade (mínimo 18 anos)'
      }
    },
    {
      key: 'dataNascimento',
      type: 'po-datepicker',
      props: {
        label: 'Data de Nascimento',
        required: true,
        description: 'Selecione sua data de nascimento'
      }
    },
    {
      key: 'estado',
      type: 'po-select',
      props: {
        label: 'Estado',
        placeholder: 'Selecione seu estado',
        required: true,
        options: [
          { label: 'São Paulo', value: 'SP' },
          { label: 'Rio de Janeiro', value: 'RJ' },
          { label: 'Minas Gerais', value: 'MG' },
          { label: 'Bahia', value: 'BA' },
          { label: 'Paraná', value: 'PR' },
          { label: 'Rio Grande do Sul', value: 'RS' },
          { label: 'Pernambuco', value: 'PE' },
          { label: 'Ceará', value: 'CE' },
          { label: 'Pará', value: 'PA' },
          { label: 'Santa Catarina', value: 'SC' }
        ],
        description: 'Selecione o estado onde reside'
      }
    },
    {
      key: 'profissao',
      type: 'po-combo',
      props: {
        label: 'Profissão',
        placeholder: 'Digite ou selecione sua profissão',
        required: true,
        options: [
          { label: 'Desenvolvedor', value: 'dev' },
          { label: 'Designer', value: 'design' },
          { label: 'Analista', value: 'analista' },
          { label: 'Gerente', value: 'gerente' },
          { label: 'Consultor', value: 'consultor' },
          { label: 'Arquiteto de Software', value: 'arquiteto' },
          { label: 'Product Owner', value: 'po' },
          { label: 'Scrum Master', value: 'sm' }
        ],
        fieldValue: 'value',
        fieldLabel: 'label',
        description: 'Digite ou selecione sua profissão'
      }
    },
    {
      key: 'genero',
      type: 'po-radio-group',
      props: {
        label: 'Gênero',
        required: true,
        options: [
          { label: 'Masculino', value: 'M' },
          { label: 'Feminino', value: 'F' },
          { label: 'Outro', value: 'O' },
          { label: 'Prefiro não informar', value: 'N' }
        ],
        description: 'Selecione seu gênero'
      }
    },
    {
      key: 'hobbies',
      type: 'po-checkbox-group',
      props: {
        label: 'Hobbies',
        options: [
          { label: 'Leitura', value: 'leitura' },
          { label: 'Esportes', value: 'esportes' },
          { label: 'Música', value: 'musica' },
          { label: 'Cinema', value: 'cinema' },
          { label: 'Culinária', value: 'culinaria' },
          { label: 'Viagens', value: 'viagens' },
          { label: 'Tecnologia', value: 'tecnologia' },
          { label: 'Arte', value: 'arte' }
        ],
        description: 'Selecione seus hobbies (múltipla escolha)'
      }
    },
    {
      key: 'biografia',
      type: 'po-textarea',
      props: {
        label: 'Biografia',
        placeholder: 'Conte um pouco sobre você...', 
        rows: 4,
        maxLength: 500,
        description: 'Escreva uma breve biografia (máximo 500 caracteres)'
      }
    }
  ];
}
```

--------------------------------

### Exemplo de Campo de Senha com PO-UI JSON Forms

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Implementa um campo de senha (po-password) com mascaramento automático e validação de comprimento mínimo usando PO-UI JSON Forms. Útil para entradas seguras de dados.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'senha',
    type: 'po-password',
    props: {
      label: 'Senha',
      placeholder: 'Digite sua senha',
      required: true,
      minLength: 8,
      description: 'A senha deve ter pelo menos 8 caracteres'
    }
  },
  {
    key: 'confirmarSenha',
    type: 'po-password',
    props: {
      label: 'Confirmar Senha',
      placeholder: 'Digite a senha novamente',
      required: true
    }
  }
];
// Saída esperada: { "senha": "********", "confirmarSenha": "********" }

```

--------------------------------

### Configure PO Combo Field for Autocomplete Selection (TypeScript)

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Shows the configuration for the 'po-combo' field, which provides an autocomplete input allowing users to type and select from a list of options. This is useful for fields like professions.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'profissao',
    type: 'po-combo',
    props: {
      label: 'Profissão',
      placeholder: 'Digite ou selecione sua profissão',
      required: true,
      options: [
        { label: 'Desenvolvedor', value: 'dev' },
        { label: 'Designer', value: 'design' },
        { label: 'Analista', value: 'analista' },
        { label: 'Gerente', value: 'gerente' },
        { label: 'Consultor', value: 'consultor' },
        { label: 'Arquiteto de Software', value: 'arquiteto' },
        { label: 'Product Owner', value: 'po' },
        { label: 'Scrum Master', value: 'sm' }
      ],
      fieldValue: 'value',
      fieldLabel: 'label',
      description: 'Digite ou selecione sua profissão'
    }
  }
];
// Saída esperada: { "profissao": "dev" }
```

--------------------------------

### Configure PO Select Field for Single Selection (TypeScript)

Source: https://context7.com/yuriduartetotvs/po-ui-json-forms-lib/llms.txt

Demonstrates how to set up the 'po-select' field for single-item selection from a static list of options. It includes defining labels, values, and placeholders, suitable for selecting states or categories.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'estado',
    type: 'po-select',
    props: {
      label: 'Estado',
      placeholder: 'Selecione seu estado',
      required: true,
      options: [
        { label: 'São Paulo', value: 'SP' },
        { label: 'Rio de Janeiro', value: 'RJ' },
        { label: 'Minas Gerais', value: 'MG' },
        { label: 'Bahia', value: 'BA' },
        { label: 'Paraná', value: 'PR' },
        { label: 'Rio Grande do Sul', value: 'RS' },
        { label: 'Pernambuco', value: 'PE' },
        { label: 'Ceará', value: 'CE' }
      ],
      description: 'Selecione o estado onde reside'
    }
  },
  {
    key: 'categoria',
    type: 'po-select',
    props: {
      label: 'Categoria',
      placeholder: 'Selecione uma categoria',
      options: [
        { label: 'Tecnologia', value: 'tech' },
        { label: 'Saúde', value: 'health' },
        { label: 'Educação', value: 'education' }
      ],
      fieldLabel: 'label',
      fieldValue: 'value'
    }
  }
];
// Saída esperada: { "estado": "SP", "categoria": "tech" }
```
Tokens:
Raw