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

Lista de Itens

PreviousFormulário DinâmicoNextCampos Personalizados

Last updated 2 years ago

Was this helpful?

A lista de itens é um componente do que permite a inclusão de vários registro iguais em lista, como, uma lista de contatos, emails, etc.

Uso

page-list-item.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>
page-list-item.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';

@Component({
  templateUrl: './page-list-item.component.html',
  styles: [
    `
      form {
        display: block;
        margin: 15px 20px;
      }
    `,
  ],
})
export class PageListItemComponent extends CatFormBase {
  config = this.formService
    .build()
    .listsItem('Contatos', 'phones', (builder) =>
      builder
        .text('Telefone', 'phone', (builder) =>
          builder.setMask('(00)00000000?0').setRequired().generate()
        )
        .generate(),
      {minItems: 1, maxItems: 5}
    )
    .onSubmit(
      (data) =>
        new Observable((observe) => {
          setTimeout(() => {
            console.log(data);
            observe.next();
            observe.complete();
          }, 1000);
        })
    )
    .generate();

  constructor(private formService: CatFormService) {
    super();
  }
}

Overview

Formulário Dinâmico
CatUi
Logo