Boost productivity generating Angular Forms with Schematics

{
	"type": "object",
	"title": "Personal Informations",
	"properties": {
		"name": {
			"title": "Name",
			"type": "string",
			"maxLength": 80
		},
		"password": {
			"title": "Password",
			"type": "string",
			"inputType": "password",
			"minLength": 6
		},
		"email": {
			"title": "Email",
			"type": "string",
			"pattern": "^\\S+@\\S+$"
		},
		"age": {
			"title": "Age",
			"type": "number",
			"min": 0,
			"max": 120
		},
		"nationality": {
			"title": "Nationality",
			"type": "string"
		},
		"cpf": {
			"title": "CPF",
			"type": "string",
			"mask": "000.000.000-00"
		},
		"phoneNumber": {
			"title": "Phone Number",
			"type": "string",
			"mask": "(00) 00000-0000",
			"inputType": "tel"
		}
	},
	"required": ["name", "cpf", "password", "email", "age"]
}
view rawpersonal-information.json hosted with ❤ by GitHub

PS: I found this JSON definition form on a website (I will let the link below) and I used it because it was just a POC. But, to be honest, the required part was something that bothered me, and probably you too, and is something I want to change in the future. Maybe creating a validation property inside each field key, for example:

{ 
    "age": { 
        "title": "Age", 
        "type": "number", 
        "min": 0, 
        "max": 120,
        "validations": {
            "required": "Age must be filled",
            "min":"Age should not be less than 0",
            "max":"Age should not be more than 120"
        }
    }
},

validations-example.json hosted with ❤ by GitHub

The POC

In the first version of this project, we thought about creating a project with minimum features to prove an idea. The features we decide stands the following:

• Generate forms only considering inputs
• Input types -text, password, email…
• Add masks to special fields like phone numbers using Ngx-mask (https://www.npmjs.com/package/ngx-mask)
• Forms styled using bootstrap
• Showing errors on inputs required
• Simple inputs validations: max, min, maxLength, minLength and pattern with regex
• Showing label to each input (properties -> title)

We still have a lot of work to do and you can check in the forms repository on Github. But with this scope, we had a good result and a schematic with a lot of possibilities and the great part: it’s easy to use and it updates automatically the module (with declarations and adding ReactiveFormsModule and FormsModule) where we add the form component, just like ng-cli.

Inside the project I add the library to generate form schema and I created an Angular example project to add and test our schematic, you can find instructions on how to run in the Readme project.

The file above shows how I read templates and generate the form code:

export function forms(_options: OptionsFormSchema): Rule {
	return (tree: Tree, _context: SchematicContext) => {
		// Log
		// context.logger.info('Info message');
		// context.logger.warn('Warn message');
		// context.logger.error('Error message');
		const workspaceConfig = tree.read('/angular.json');

		if (!workspaceConfig) {
			throw new NotValidAngularWorkspace();
		}

		const workspaceContent = workspaceConfig.toString();

		const workspace: workspace.WorkspaceSchema = JSON.parse(
			workspaceContent
		);

		if (!_options.project) {
			_options.project = workspace.defaultProject || '';
		}

		const projectName = _options.project;
		const project = workspace.projects[projectName];

		const jsonFormConfig = tree.read(`${_options.config}`);

		if (!jsonFormConfig) {
			throw new FormJsonNotFoundError();
		}

		const jsonFormContent = jsonFormConfig.toString();

		const formJsonObj = new FormJson(JSON.parse(jsonFormContent));

		const projectType =
			project.projectType === 'application'
				? ProjetTypeEnum.APP
				: ProjetTypeEnum.LIB;

		if (!_options.path) {
			_options.path = `${project.sourceRoot}/${projectType}`;
		}
		const parsedOptions = parseName(_options.path, _options.name);
		_options = { ..._options, ...parsedOptions };

		const templateSource = apply(url('./templates/forms'), [
			renameTemplateFiles(),
			template({
				...strings,
				..._options,
				formJsonObj
			}),
			move(normalize((_options.path + '/' + _options.name) as string))
		]);

		return chain([
			branchAndMerge(chain([mergeWith(templateSource)])),
			addTreeModulesToModule(_options),
			addDeclarationsToModule(_options)
		])(tree, _context);
	};
}
forms-index.ts hosted with ❤ by GitHub

Line 7–17: This block is responsible for reading the project workspace where we want to generate our forms. If it’s not a valid Angular workspace will throw an error.

Line 17–34: This block we will get the config JSON file and parse into a model with all our rules to generate forms. This model is embedded in templates to be used.

Line 34–55: We pass our FormModel created from JSON file into _options object to be used in our templates files

Line 55–61: We add our files into the tree and call helpers methods to add declaration array in the module where we want to put our new form-component.

And in the folder templates/forms we have 5 files.

__name@dasherize__-form.component.__style__.template — this one creates the style file, where the __style__ will be replaced by the extension the user pass. By default, it takes SCSS extension(a really good improvement to the future is to detect what style the workspace use automatically)

__name@dasherize__-form.component.html.template — This is the HTML file, here we use the formJsonObj.properties to iterate and generate all <inputs> fields

__name@dasherize__-form.component.spec.ts.template — This file we create our Spec file, we add the necessary modules and set up the TestBed to pass a minimum test — a smoke test. We want to add more tests in the future.

__name@dasherize__-form.component.ts.template — This is the component file with our formBuilder and forms creations, here we will add validators and any useful function to be used in the template.

__name@dasherize__.model.ts.template — And this is our form model when we call this.form.value. We generate this model based on the properties of formJsonObj.

I will let you some links to learn what means the special alias on the file name and even the syntax inside templates.

And what about the result generated? Ok, I will run the following command inside example/angular-template folder:

ng g f personalInformation ./jsons/personal-information.json

Where “f” is an alias to forms, just like ng-cli do. And the second param is our config JSON file with our form definitions I’ve shown earlier. My terminal output was:

And the code result was:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMaskModule } from 'ngx-mask';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PersonalInformationFormComponent } from './personal-information/personal-information-form.component';

@NgModule({
	declarations: [AppComponent, PersonalInformationFormComponent],
	imports: [
		BrowserModule,
		SharedModule,
		NgxMaskModule.forRoot({
			validation: true
		}),
		ReactiveFormsModule,
		FormsModule,
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {}
after-app.module.ts hosted with ❤ by GitHub

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMaskModule } from 'ngx-mask';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		SharedModule,
		NgxMaskModule.forRoot({
			validation: true
		}),
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {}
before-app.module.ts hosted with ❤ by GitHub

<app-section title="Personal Informations">
  <form
    class="form"
    [formGroup]="this.personalInformationForm"
    name="personal-information-form"
  >
    <div class="row">
      <div class="col-6">
        <app-custom-input label="Name">
          <input
            formControlName="name"
            name="name"
            type="text"
            class="form-control"
            id="input-name" 
            maxLength="80"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Password">
          <input
            formControlName="password"
            name="password"
            type="password"
            class="form-control"
            id="input-password" 
            minLength="6"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Email">
          <input
            formControlName="email"
            name="email"
            type="text"
            class="form-control"
            id="input-email" 
            pattern="^\S+@\S+$"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Age">
          <input
            formControlName="age"
            name="age"
            type="number"
            class="form-control"
            id="input-age" 
            min="0" 
            max="120"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Nationality">
          <input
            formControlName="nationality"
            name="nationality"
            type="text"
            class="form-control"
            id="input-nationality"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="CPF">
          <input
            formControlName="cpf"
            name="cpf"
            type="text"
            class="form-control"
            id="input-cpf" 
            mask="000.000.000-00"
            appInputRef
          />
        </app-custom-input>
      </div>
      
      <div class="col-6">
        <app-custom-input label="Phone Number">
          <input
            formControlName="phoneNumber"
            name="phone-number"
            type="tel"
            class="form-control"
            id="input-phone-number" 
            mask="(00) 00000-0000"
            appInputRef
          />
        </app-custom-input>
      </div>
      
    </div>
    <div class="row">
      <div class="col-6 d-flex justify-content-start w-25 p-3">
        <button
          type="reset"
          [disabled]="!this.personalInformationForm.touched"
          (click)="onReset()"
          class="btn btn-danger"
          name="reset"
        >
          Reset Form
        </button>
      </div>
      <div class="col-6 d-flex justify-content-end w-25 p-3">
        <button
          type="submit"
          [disabled]="!this.personalInformationForm.valid"
          (click)="onSubmit()"
          name="submit"
          class="btn btn-primary"
        >
          Submit
        </button>
      </div>
    </div>
  </form>
</app-section>

personal-information-form.component.html hosted with ❤ by GitHub

// blank file
personal-information-form.component.scss hosted with ❤ by GitHub

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { PersonalInformationFormComponent } from './personal-information-form.component';

describe('PersonalInformationFormComponent', () => {
  let component: PersonalInformationFormComponent;
  let fixture: ComponentFixture<PersonalInformationFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PersonalInformationFormComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [
        NoopAnimationsModule,
        ReactiveFormsModule,
        FormsModule
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PersonalInformationFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should compile', () => {
    expect(component).toBeTruthy();
  });
});
personal-information-form.component.spec.ts hosted with ❤ by GitHub

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators  } from '@angular/forms';
import { PersonalInformationInterface } from './personal-information.model';

@Component({
  selector: 'app-personal-information-form',
  templateUrl: './personal-information-form.component.html',
  styleUrls: ['./personal-information-form.component.scss']
})
export class PersonalInformationFormComponent implements OnInit {
  public personalInformationForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
     this.personalInformationForm = this.initializeForm();
  }

  private initializeForm() {
     return this.fb.group({
       name: [null, [Validators.required] ], 
       password: [null, [Validators.required] ], 
       email: [null, [Validators.required] ], 
       age: [null, [Validators.required] ], 
       nationality: [null], 
       cpf: [null, [Validators.required] ], 
       phoneNumber: [null], 
     })
  }

  onSubmit() {
    console.log(this.getFormValue());
    alert('form submitted');
    alert(JSON.stringify(this.getFormValue()));
  }

  onReset() {
    this.personalInformationForm.reset();
  }

  getFormValue(): PersonalInformationInterface {
    return this.personalInformationForm.value;
  }

  getFormControlValue(formControlName: string) {
    return this.personalInformationForm.get(formControlName).value;
  }
}
personal-information-form.component.ts hosted with ❤ by GitHub

export interface PersonalInformationInterface {
name: string;
password: string;
email: string;
age: number;
nationality: string;
cpf: string;
phoneNumber: string;
}
personal-information.model.ts hosted with ❤ by GitHub

How to contribute to Forms Schematic

That’s it on this post, I hope you enjoyed. I also want to invite you to help us to improve the project and create a really useful schematic to boost forms creation, feel free to contact me on adrian.caetano@ilegra.com if you have any question or want to submit a PR to our project solving some issue.

At least, I want to say thank you to my friend Diego Pacheco who gave me the idea and motivation to start this forms generation to help our team and also created a POC using Yeoman and AngularJS generating a input field to convince me that was possible to achieve this hehe. And I want to mention Matheus Streb Vieira who started with me the creation of schematics to generate CRUD HTTP services to Angular applications and help me to think about the POC scope.

Source: medium.com/@adrianlemess