Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • Uso
  • Overview

Was this helpful?

  1. Formulário

Campos Personalizados

Visando situações em que se faz necessário criar componentes ou campos de formulário específicos para sua regra de negócio, porém, queira ainda usufluir dos formulários do Cat UI, siga os passos abaixo:

Uso

custom-field-example.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CatFormCustomFieldBase } from '@catrx/ui/form';

@Component({
  templateUrl: './custom-field-example.component.html',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
})
export class CustomFieldExampleComponent extends CatFormCustomFieldBase {}
custom-field-example.component.html
<div *ngIf="getConfig().control$ | async as control" class="">
  <label>{{ getConfig().label }}</label>
  <input type="text" [formControl]="control" />
</div>
page-custom-field.component.ts
import { Component } from '@angular/core';
import { CatFormBase } from '@catrx/ui/common';
import { CatFormService } from '@catrx/ui/form';
import { Observable } from 'rxjs/internal/Observable';
import { CustomFieldExampleComponent } from './custom-field-example/custom-field-example.component';

@Component({
  templateUrl: './page-custom-field.component.html',
  styles: [
    `
      form {
        display: block;
        margin: 15px 20px;
      }
    `,
  ],
})
export class PageCustomFieldComponent extends CatFormBase {
  config = this.formService
    .build({ customField: 'teste' })
    .customField(
      'Campo personalizado',
      'customField',
      CustomFieldExampleComponent,
      (field) => field.setRequired().generate()
    )
    .onSubmit(
      (data) =>
        new Observable((observe) => {
          setTimeout(() => {
            console.log(data);
            observe.next();
            observe.complete();
          }, 1000);
        })
    )
    .generate();

  constructor(private formService: CatFormService) {
    super();
  }
}
page-custom-field.component.html
<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>
<form (submit)="submit($event)">
  <cat-form #form [config]="config"></cat-form>
  <cat-primary-button type="submit" [showLoader]="submitLoader$ | async">
    Enviar
  </cat-primary-button>
</form>

Overview

PreviousLista de ItensNextStepper

Last updated 2 years ago

Was this helpful?

CatUi
Logo