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

https://cat-ui.igordrangel.com.br/components/form/custom-fieldcat-ui.igordrangel.com.br