/dynamic-forms-angular

Dynamic creation of forms from a component

Primary LanguageTypeScript

Dynamic Forms Angular

This project was generated with Angular CLI version 14.0.3.

The project aims to facilitate the use of common forms such as select, textArea, standard input, checkbox and checkbox group.

The following are examples for generating a form for each field:

new FormText({
  key: "em",
  label: "Email",
  required: true,
});

new FormTextArea({
  key: "description",
  label: "Descrição",
  required: true,
});

new FormSelect({
  key: "animal",
  label: "Favorite animal",
  options: [
    { key: "cat", value: "Cat" },
    { key: "dog", value: "Dog" },
  ],
  required: true,
});

new FormCheckbox({
  key: "readAgreement",
  label: "Read agreement?",
  required: true,
});

new FormCheckboxGroup({
  key: "items",
  label: "Items",
  options: [
    { key: "cat", value: "Cat" },
    { key: "dog", value: "Dog" },
    { key: "wold", value: "Wolf" },
    { key: "horse", value: "Horse" },
  ],
  group: true,
  required: true,
});

Basically they are Instantiations of their respective classes, their parameter chain comes from the base model, where below we have the parameters that can be inferred in the creation of each class/field:

class FormInputBase {
  value: T | undefined;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  type: string;
  options: optionsProps[];
  validators: ValidatorFn[] | null;
  readonly: boolean;
  description?: string;
  group?: boolean;
}

In order to actually use this creation, we must first create the fields by instantiating the classes mentioned above and then send them in the html/template of the component where it will be used.

<dynamic-form [formFields]="myForm"></dynamic-form>
  myForm: FormInputBase<string | boolean>[] = [
    new FormText({
      key: 'em',
      label: 'Email',
      required: true,
      validators: [Validators.email],
    }),
  ];

For better understanding download the project run the installation commands and learn how it works.

 yarn
 yarn start

or

 npm install
 npm run start

Done with ❤️ by Sidney Roberto