DEV Community: Maxime Lafarie

Build dynamic Angular forms on-the-fly

Maxime Lafarie — Tue, 10 Dec 2019 13:20:12 +0000

Forms never been a simple thing to deal with in Angular projects: you need to design each of them "properly" in the markup but also in the component with FormControls and make sure everything fits well together.
You also have to keep in mind that it will probably change frequently to meet the rapidly changing business and regulatory requirements.

We will see how to create on-the-fly forms with metadata that describes the business object model.

The metadata

The metadata will feed our system to indicate what will be:

the values
the field name
the field type
the validation conditions
other things like placeholders, patterns and so on...

It will be structured in JSON, but you can obviously use the language you want: JSON+LD, csv, XML or whatever format you like.

The data source also could be an API, a file or any other available source of data.

In JSON, it will look like this (you can obviously adapt it to your needs):

// question-base.ts

export class QuestionBase<T> {
  value: T;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  placeholder: string;
  iterable: boolean;

  ...
}

This will be a skeleton for every other kind of elements we would create like:

input
textarea
select
any other form field...

Each of these form elements will share the same Class and extends it for their proper needs. For example option will only be useful for <select> element:

// question-dropdown.ts

import { QuestionBase } from './question-base';

export class DropdownQuestion extends QuestionBase<string> {
  controlType = 'dropdown';
  options: { key: string, value: string }[] = [];

  constructor(options: {} = {}) {
    super(options);
    this.options = options['options'] || [];
  }
}

The component

In order to make the code flexible, reliable, easily testable and maintainable, it has been spared in two parts. Firstly, there is the component (app-dynamic-form) that will always be called in app's components as a wrapper:

<!-- app.component.html -->

<app-dynamic-form #dynamicForm
                  [questions]="questions"></app-dynamic-form>

and then, the app-question component that will be called and repeated by app-dynamic-form in order to create each separate form field:

<!-- dynamic-form.component.html -->

...
<div *ngFor="let question of questions"
     class="form-row">
  <app-question [question]="question"
                [form]="form"></app-question>
</div>
...

Make it iterable (repeatable)

As you can see above, app-question is wrapped inside an ngFor that loops over a collection of questions, which is nothing else than an array of QuestionBase as demonstrated at the beginning of this article.

Inside this component, there's an ngSwitch. Its job is to display the right HTMLElement depending on the type of field given in the object:

<!-- dynamic-form-question.component.html -->

<div [ngSwitch]="question.controlType">

    <input *ngSwitchCase="'textbox'"
            [formControl]="questionControl(index)"
            [placeholder]="question.placeholder"
            [attr.min]="question['min']"
            [attr.max]="question['max']"
            [attr.pattern]="question['pattern']"
            [id]="questionId(index)"
            [type]="question['type']">

    <select [id]="question.key"
            *ngSwitchCase="'dropdown'"
            [formControl]="questionControl(index)">
    <option value=""
            disabled
            *ngIf="!!question.placeholder"
            selected>{{ question.placeholder }}</option>
    <option *ngFor="let opt of question['options']"
            [value]="opt.key">{{ opt.value }}</option>
    </select>

    ...

</div>

You may have noticed the way we're passing attributes values like [attr.min]="question['min']" to elements with options attributes assigned in the constructor:

// question-dropdown.ts

import { QuestionBase } from './question-base';

export class TextboxQuestion extends QuestionBase<string> {
  type: string;
  min: number | string;
  ...

  constructor(options: {} = {}) {
    super(options);
    this.type = options['type'] || 'text';
    this.min = options['min'];
    ...
}

But there's not only FormControls to display, FormArray's nice too! So let's go with some content projection:

<!-- dynamic-form-question.component.html -->

<div *ngIf="question.iterable; else formTmpl">
    <div *ngFor="let field of questionArray.controls; 
                 let i=index; first as isFirst last as isLast">

        <ng-container [ngTemplateOutlet]="formTmpl"
                    [ngTemplateOutletContext]="{index: i}"></ng-container>

        <button *ngIf="question.iterable && questionArray.controls.length > 1"
                (click)="removeQuestion(i)"
                type="button">-</button>

        <button *ngIf="question.iterable && isLast"
                (click)="addQuestion()"
                type="button">+</button>

    </div>
</div>

You can see that this line <div *ngIf="question.iterable; else formTmpl"> is the one who decides to display either a collection of FormArray or a simple FormControl so it is wrapped in an ng-template. I'm passing current index with let-index="index" given that this is the only way to know in which iteration step we are:

<!-- dynamic-form-question.component.html -->
  ..
  <ng-template #formTmpl
               let-index="index">
    <label [attr.for]="questionId(index)">{{ questionLabel(index) }}</label>

    <div [ngSwitch]="question.controlType">
    ...

The challenge here is to keep the "link" with the right question element (the one we're iterating on) because with this configuration there will be questions in a question. Types and classes will remain the same at this point because the only way to determine if a question is iterable is to check the iterable property of the question.

Thanks to the index property injected with <ng-template #formTmpl let-index="index">, we can easily retrieve it in ngTemplateOutletContext with:

<ng-container [ngTemplateOutlet]="formTmpl"
              [ngTemplateOutletContext]="{index: i}"></ng-container>

and do the job on the right iteration of the collection.

Demo & code

All of the source code is available on Github and a demo is already available if you are just curious to see the awesomeness of the dynamic forms!

maximelafarie / angular-dynamic-forms

On-the-fly form generation from data with Angular

🔥Demo available here🔥

Credits

^{Photo by Patrick Langwallner on Unsplash}
^{Many thanks to @manekinekko for rereading & correction}

Improve your GitHub repo visibility on Social Networks

Maxime Lafarie — Thu, 27 Jun 2019 13:15:13 +0000

I just discovered a very interesting way to improve the display of a GitHub repository on social networks!

Really?

Basically, when you publish a link to a GitHub repository on a platform that supports meta tags (like OpenGraph), the display is a little poor:

An overview of how Facebook displays it

An overview of how Twitter displays it

Indeed, a new "Social preview" section has recently appeared in the repository settings.

It's that simple!

From then on, you can define an image to customize (improve) the appearance of your repository on social networks. The recommended image size for optimal display is 1280×640px. The minimum size is 640×320px.
You also have the possibility to download a basic template that will help you create (if you have not already done so) your image with optimized margin management.

Here is the result once the new image has been uploaded:

On Facebook

On Twitter

Here is a simple way to look after the appearance of your repository on social networks and sites that support meta tag display.

Cheers! 🖖

It's Friday: let's dev in music!

Maxime Lafarie — Fri, 14 Jun 2019 14:59:35 +0000

As a developer, I really enjoy to code while listening to some music (it's one of the benefits of our job). I think it helps me to focus and destress.

At work, when I look around me, there's only one or two people who aren't wearing headphones... 😅

I'll share with you each Friday a song that I particularly liked. I know everybody won't like the songs I'll share, but it's not the main purpose. The goal of these posts is to exchange about this awesome way to focus or chill up in our job (coding is stressing and it varies depending on each developer).

Why ? I think we can all exchange about songs and kind of music that we're listening to at job (and why). To my mind, it brings joy and happiness (especially the Friday). Let's relax and enjoy life a little bit!

Today, it's the song "Love.Me" from the artist "Driver". It comes from the album "Forest" which is really good.

Feel free to let me know if you liked the song, the post type and to share any song you're currently listening to and what is the importance of music at work for you.

Finally, I would like to share with you this awesome article that deals with music at work:

The Definite Guide to Pick the Correct Music While Working

Periklis Gkolias ・ Aug 27 '18

#music #productivity #binauralbeats

Have a nice Friday! 🖖

How to enable night mode on Dev.to

Maxime Lafarie — Fri, 14 Jun 2019 09:33:56 +0000

I saw many people trying to get Dev.to in night mode with extensions, code tricks and so on.

A preview of how Dev.to's night mode is looking

The only thing you need to know in order to enable night mode in Dev.to is going to: Your profile -> Settings -> Misc (left menu) and changing the theme you want in the Style Customization -> Site Theme category.

Here you can switch between several themes for Dev.to

Click the Submit button and Enjoy! 🖖

Please note that the night mode on Dev.to is in public beta. If you want to contribute, you can go on the GitHub repo. 🤓

forem / forem

For empowering community 🌱

Forem 🌱

For Empowering Community

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…

View on GitHub