Common Fields

Displays all the prebuilt common fields available in the library, including name, email, address, phone, date of birth, gender, currency, description, and action buttons. Ideal for reference and testing.

Live Demo

First Name

Middle Name

Last Name

Full Name

Name

Username

Password

Phone Number

Date Of Birth

Gender MaleFemale

Address

Street

City

State

Postal Code

Country

Address composed

Street

City

State

Postal Code

Country

Currency

Description

Result

import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
import { Preforms } from '@preforms/angular/core';
import { NATIVE_FORM_ELEMENTS } from '@preforms/angular/native';
import {
  Address,
  City,
  ConfirmButton,
  Country,
  CurrencyField,
  DateOfBirth,
  Description,
  EmailField,
  Fieldset,
  FirstName,
  FormRow,
  FullName,
  Gender,
  LastName,
  MiddleName,
  Name,
  PasswordField,
  PhoneNumber,
  PostalCode,
  ResetButton,
  State,
  Street,
  SubmitButton,
  UserName,
} from '@preforms/ts';

@Component({
  selector: 'app-common-fields',
  template: `<preforms (submittedData)="logData($event)" [fields]="fields" />`,
  imports: [Preforms],
  encapsulation: ViewEncapsulation.None,
  providers: [NATIVE_FORM_ELEMENTS],
})
export class CommonFieldsComponent {
  @Output() formChange = new EventEmitter<any>();

  fields = [
    new FormRow([new FirstName(), new MiddleName(), new LastName()]),

    new FullName(),
    new Name(),
    new UserName(),
    new EmailField(),
    new PasswordField(),
    new PhoneNumber(),
    new DateOfBirth(),
    new Gender(),
    new Fieldset({
      label: 'Address',
      fields: [new Address()],
    }),
    new Fieldset({
      label: 'Address composed',
      fields: [new Street(), new City(), new State(), new PostalCode(), new Country()],
    }),
    new CurrencyField(),
    new Description(),

    new FormRow([new SubmitButton(), new ResetButton(), new ConfirmButton()]),
  ];

  logData(data: any) {
    this.formChange.emit(data);
  }
}