Formulário de Cadastro e Edição

page-adoption.component.ts

import { AdoptionService } from './../../shared/services/adoption/adoption.service';
import { Component } from '@angular/core';
import { CatCRUDComponentBase } from '@catrx/ui/common';
import { CatDatatableService } from '@catrx/ui/datatable';
import { CatFormService, CatFormListOptions } from '@catrx/ui/form';
import { CatDialogService } from '@catrx/ui/dialog';
import { CatLoaderPageService } from '@catrx/ui/loader-page';
import { CatSnackbarService } from '@catrx/ui/snackbar';
import { CatConfirmService } from '@catrx/ui/confirm';
import { CatXlsxService } from '@catrx/ui/utils/xlsx';
import { PetSexOptions, Pet } from '../../shared/services/adoption/adoption.interface';
import { klArray } from '@koalarx/utils/operators/array';

@Component({...})
export class PageAdoptionComponent extends CatCRUDComponentBase {
  ...

  constructor(...) {...}

  openDialog(data?: Pet) {
    this.openFormDialog(
      this.formService
        .build(data)
        .text('Raça', 'race', (builder) =>
          builder.grid(6).focus().setRequired().generate()
        )
        .select('Sexo', 'sex', (builder) =>
          builder.grid(6).setOptions(PetSexOptions).setRequired().generate()
        )
        .text('Peso', 'weight', (builder) =>
          builder.grid(6).setRequired().generate()
        )
        .text('Idade', 'yearsOld', (builder) => builder.grid(6).generate())
        .listsItem('Vacinas', 'vacines', (builder) =>
          builder
            .text('Nome', 'name', (builder) =>
              builder.grid(6).setRequired().generate()
            )
            .date('Data da Aplicação', 'dateApplied', (builder) =>
              builder.grid(6).setRequired().generate()
            )
            .generate()
        )
        .onSubmit((pet) => this.service.save(pet, data?.id))
        .generate(),
      !!data,
      { title: 'Pet', size: 'small' }
    );
  }

  export(filename: string): void {...}
}

page-adoption.component.html

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-primary-button (click)="openDialog()">
      Incluir Pet
    </cat-primary-button>
  </nav>
</cat-toolbar>

...