Lista de Itens

A lista de itens é um componente do Formulário Dinâmico 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('[phone]?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

CatUi