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
  • Métodos
  • Caso de Uso

Was this helpful?

  1. Abstrações

FormBase

Abstração para formulários

PreviousCRUDComponentBaseNextCriando uma Aplicação de CRUD

Last updated 2 years ago

Was this helpful?

Métodos

submit

Este método irá submeter o formulário e definirá o atributo como true e após a conclusão ou erro da requisição definirá como false.

Informe $event no parâmetro para que ocorra o preventDefault().

Para que este método funcione, deverá ser marcado no componente com #form, para que seja possível capturar o componente de formulário através do @ViewChield.

submitLoader$

Este atributo trata-se de um BehaviorSubject<boolean> que poderá ser utilizado para definir estado dos componentes quando o formulário for submetido atrás do método .

Caso de Uso

import { CatFormBase } from "@catrx/ui/common";
import { CatFormService } from "@catrx/ui/form";

@Component({
  template: `<form (submit)="submit($event)">
    <cat-form [config]="formConfig"></cat-form>
    <cat-primary-button type="submit" [showLoader]="submitLoader$ | async">
      Enviar
    </cat-primary-button>
  </form>`
})
export class FormComponent extends CatFormBase {
  formConfig = this.formService
    .build()
    .text('Nome', 'name', builder => 
      builder.setRequired().generate()
    )
    .onSubmit(data => this.service.save(data))
    .generate()
  
  constructor(private formService: CatFormService) {
    super();
  }
}
cat-form
submitLoader$
submit