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
Last updated
Was this helpful?