DiForms

Biblioteca para facilitar a criação de formulários Angular com componentes do Angular Material.

Sobre

A biblioteca DiForms tem como objetivo facilitar a criação de formulários Angular com componentes do Angular Material, tudo isso através de um schema JSON. Com ela, é possível definir o layout e as validações dos campos de forma declarativa, simplificando o processo de criação e manutenção de formulários em projetos Angular.

Instalação

  npm install @devinova/forms

Utilização

Para utilizar a biblioteca, é necessário importar o módulo DiFormsModule no módulo da aplicação em que se deseja utilizá-la:

import { NgModule } from "@angular/core";
import { DiFormsModule } from "@devinova/forms";

@NgModule({
  imports: [DiFormsModule],
})
export class AppModule {}

Definindo o schema das Entidades

O primeiro passo para utilizar a biblioteca é criar um schema para cada entidade. exemplo:

export const userSchema = {
  name: {
    inputType: DiInputType.text,
    componentType: DiComponentType.input,
    title: 'Nome',
    placeholder: 'Preencha seu nome',
    controlOptions: {
      value: '',
      validators: Validators.compose([
        Validators.minLength(10),
        Validators.maxLength(15),
      ]),
    },
  },
  birthDate: {
    componentType: DiComponentType.date,
    title: 'Data de nascimento',
    placeholder: 'Selecione sua data de nascimento',
    controlOptions: {
      value: new Date(),
      validators: Validators.compose([Validators.required]),
    },
  },
  cpf: {
    inputType: DiInputType.text,
    componentType: DiComponentType.input,
    title: 'CPF',
    placeholder: 'Preencha seu cpf',
    mask: '000.000.000-00',
    controlOptions: {
      value: '',
      validators: Validators.compose([
        Validators.required,
        Validators.minLength(11),
        diCPFValidate,
        Validators.maxLength(11),
      ]),
    },
  },
  avatar: {
    componentType: DiComponentType.image,
    title: 'Avatar',
    controlOptions: {
      value: '',
      validators: Validators.compose([Validators.required]),
    },
  },
  password: {
    inputType: DiInputType.password,
    componentType: DiComponentType.input,
    title: 'Digite sua senha',
    placeholder: 'Senha',
    controlOptions: {
      value: '',
      validators: Validators.compose([
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(16),
      ]),
    },
  },
  confirmPassword: {
    inputType: DiInputType.password,
    componentType: DiComponentType.input,
    title: 'Confirmar senha',
    placeholder: 'Digite sua confirmação de senha',
    controlOptions: {
      value: '',
      validators: Validators.compose([
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(16),
        diMatchControls('password', DiFormErrorType.passwordMatch),
      ]),
    },
  },
} satisfies DiCreateSubGroupSchema<any>;

Definindo o schema global

Após definir o schema de cada entidade, é necessário importá-las em um schema global.

export const globalSchema = {
  experience: experienceSchema,
  user: userSchema,
} satisfies DiCreateGroupSchema<any>;

Utilizando

Para cada página que for precisar de um formulário, você deve criar um schema com apenas os campos que você precisar, podendo, altera-los e definir algumas regras de renderização:

export const loginPageSchema = {
  user: {
    name: {
      layout: {
        w100: true,
        es: 6,
        sm: 6,
        md: 6,
        lg: 6,
        xl: 4,
        xxl: 4,
      },
    },
    birthDate: {},
    avatar: {
      layout: {
        es: 6,
        md: 6,
        lg: 6,
        xl: 6,
        xxl: 6,
      },
    },
  },
  experience: {
    quantity: {},
    prices: [
      {
        min: {
          title: 'Minimo modificado',

          layout: {
            es: 12,
            sm: 6,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 4,
          },
        },
        max: {
          layout: {
            es: 12,
            sm: 6,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 4,
          },
        },
        price: {
          layout: {
            es: 12,
            sm: 6,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 4,
          },
        },
      },
    ],
  },
} satisfies DiBuildGroupSchema<typeof globalSchema>;

Utilizando em seu component.ts:

export class AppComponent implements OnInit {
  diBuilded!: DiBuilded<typeof loginPageSchema, typeof globalSchema>;

  constructor(private diFormService: DiFormService) {}

  ngOnInit(): void {
    this.diBuilded = this.diFormService.build<
      typeof loginPageSchema,
      typeof globalSchema
    >({
      globalSchema: globalSchema,
      pageSchema: loginPageSchema,
    });
  }
}

Utilizando em seu HTML:

     <di-forms [diBuilded]="diBuilded"></di-forms>

Autores

• @devinova

Contribuindo

Contribuições são sempre bem-vindas!