Formulários com Angular

Como integrar componentes de entrada do Makuco UI com Angular Forms (Template-driven e Reactive Forms).

Os componentes de entrada do Makuco UI (mk-input, mk-select, mk-checkbox, mk-input-otp) são form-associated — implementam a API ElementInternals e participam nativamente de submissões de formulário HTML.

No Angular, a integração com o sistema de formulários (ngModel / FormControl) requer o uso dos Modules em vez dos Components standalone.

Component vs Module

Cada componente de entrada é exportado em dois formatos:

Exportação	Quando usar
`MkInputComponent`	Renderização simples, sem binding de formulário
`MkInputModule`	Com `ngModel`, `formControl` ou `formControlName`

O Module inclui a diretiva ControlValueAccessor que conecta o web component ao ciclo de detecção de mudanças e validação do Angular Forms.

Atenção

Usar MkInputComponent com formControl não emite erros em tempo de desenvolvimento, mas os valores não são sincronizados com o formulário. Sempre use o Module correspondente em contextos de formulário.

Template-driven Forms

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MkInputModule, MkSelectModule, MkCheckboxModule } from '@db1/makuco-ui-angular';

@Component({
  standalone: true,
  imports: [FormsModule, MkInputModule, MkSelectModule, MkCheckboxModule],
  template: `
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <mk-input label="Nome" [(ngModel)]="name" name="name" required />
      <mk-select label="Perfil" [(ngModel)]="role" name="role" />
      <mk-checkbox label="Aceito os termos" [(ngModel)]="terms" name="terms" />
      <button type="submit">Enviar</button>
    </form>
  `,
})
export class TemplateDrivenExample {
  name = '';
  role = '';
  terms = false;

  onSubmit(form: NgForm) {
    if (form.valid) console.log(form.value);
  }
}

Reactive Forms

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import { MkInputModule, MkSelectModule, MkCheckboxModule } from '@db1/makuco-ui-angular';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, MkInputModule, MkSelectModule, MkCheckboxModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <mk-input label="E-mail" formControlName="email" />
      <mk-select label="Perfil" formControlName="role" />
      <mk-checkbox label="Aceito os termos" formControlName="terms" />
      <button type="submit" [disabled]="form.invalid">Enviar</button>
    </form>
  `,
})
export class ReactiveExample {
  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    role: new FormControl(''),
    terms: new FormControl(false, Validators.requiredTrue),
  });

  onSubmit() {
    if (this.form.valid) console.log(this.form.value);
  }
}

Referência de Modules

Componente	Module para Forms
`mk-input`	`MkInputModule`
`mk-select`	`MkSelectModule`
`mk-checkbox`	`MkCheckboxModule`
`mk-input-otp`	`MkInputOtpModule`

Formulários com Angular

Component vs Module

Template-driven Forms

Reactive Forms

Referência de Modules

On this page