GmAssignment

A frontend technical assignment built with Angular 14 that dynamically renders a functional web form from a JSON configuration file.

The application demonstrates how to build a reusable dynamic form component capable of reading field definitions from JSON and generating form controls at runtime. It supports text fields, checkboxes, hidden fields, required validation, and form submission handling.

---

Built With

---

Overview

This project was created as part of the GeriMedica Frontend Assignment.

The goal is to build an Angular component that:

• Reads a JSON file
• Renders a functional web form dynamically
• Supports text fields and checkboxes
• Allows hidden fields
• Supports mandatory field validation
• Logs submitted form data to the console
• Includes unit tests

The form structure is driven entirely by JSON, making the solution reusable and extensible for future field types and validation rules.

---

Assignment JSON Example

[
  {
    "field": "name",
    "label": "Name",
    "type": "text",
    "hidden": "false",
    "mandatory": true
  },
  {
    "field": "email",
    "label": "Email",
    "type": "text",
    "hidden": "false",
    "mandatory": true
  },
  {
    "field": "confirm",
    "label": "Checkbox with confirmation",
    "type": "check",
    "hidden": "false"
  },
  {
    "field": "hiddenField",
    "label": "",
    "type": "text",
    "hidden": "true",
    "mandatory": false
  }
]

---

Features

• Dynamic form generation from JSON configuration
• Support for text inputs
• Support for checkbox fields
• Hidden field handling
• Required field validation
• Form submission with console.log output
• Reusable shared dynamic form component
• Unit testing with Jasmine and Karma
• Code quality enforcement with ESLint
• Code formatting with Prettier

---

How It Works

The application reads a JSON schema describing the fields of a form.
Each field contains metadata such as:

• field → unique field name
• label → displayed label
• type → form control type
• hidden → whether the field should be rendered
• mandatory → whether the field is required

Based on this configuration, the application dynamically creates form controls and renders them in the UI.

When the user clicks Submit:

• required fields are validated
• invalid fields are highlighted by Angular form validation
• valid data is printed to the browser console

---

Project Structure

app
├── shared
│   ├── component
│   │   └── dynamic-form
│   ├── models
│   └── services
└── your-page

assets
environments

Structure Notes

• shared/component/dynamic-form
  Contains the reusable dynamic form component responsible for rendering JSON-driven fields.

• shared/models
  Contains interfaces or model definitions for form field configuration.

• shared/services
  Contains services related to loading or managing form configuration data.

• your-page
  Hosts the page where the dynamic form component is consumed.

---

Run Locally

Clone the project

bash
git clone https://github.com/sarlakZM/gm-assignment.git

Go to the project directory

bash
cd gm-assignment

Install dependencies

bash
npm install

Start the development server

bash
npm run start

Navigate to:

bash
http://localhost:4200/

---

Development

Command	Description
npm run start	Start the Angular development server
npm run build	Build the application
npm run watch	Build in watch mode using development configuration
npm run test	Run unit tests with Karma
npm run lint	Analyze the code with ESLint
npm run lint-and-fix	Analyze and automatically fix lint issues
npm run prettier-format	Format TypeScript files with Prettier

---

Validation Behavior

The form supports validation rules defined in the JSON configuration.

Supported rules

• mandatory: true
  Marks the field as required

• hidden: true
  Prevents the field from being rendered in the UI

Expected behavior

• Empty required fields should block valid submission
• Visible fields should render according to type
• Hidden fields should not appear in the UI
• Submitted values should be logged when the form is valid

---

Testing

This project includes unit testing support using:

• Jasmine
• Karma

To run tests:

bash npm run test

Testing focuses on validating the dynamic form behavior, including:

• rendering fields from JSON
• handling text and checkbox inputs
• respecting hidden fields
• validating required fields
• submitting valid form data

---

Design Considerations

• Dynamic rendering makes the form reusable for different configurations
• Angular Forms provide a reliable and scalable validation model
• Shared architecture improves maintainability and separation of concerns
• JSON-driven structure allows easy expansion for future field types such as selects, radios, or date pickers

---

Possible Future Improvements

• Add support for more field types:
  • radio buttons
  • select dropdowns
  • date pickers
  • textarea
• Add custom validation rules:
  • email format
  • minimum / maximum length
  • regex patterns
• Add inline validation messages
• Load form schema from remote API
• Add stronger typing for field configuration
• Improve test coverage for edge cases

---

Zahra Sarlak
Assignmentt for gerimedica .