Ngx-Inject-Control

A painless and idiomatic way to create reusable form controls for Angular applications.

Battle-tested at Ezfire.

Version

• For Angular >=12, please use ngx-inject-control 1.x.x. npm install ngx-inject-control@1.0.0

Installation

npm:

npm install --save ngx-inject-control

Yarn

yarn add ngx-inject-control

Features

• Reusable form components
• Idiomatic API
• Behaves like you expect
• Plays nicely with UI libraries (e.g. Angular Material)

Usage

Create an injectable control

To use ngx-inject-control you first need to create an InjectableControl. An InjectableControl is an Angular component with a property called control of type AbstractControl. Finally, the InjectableControl must provide itself with the NGX_INJECTABLE_CONTROL token.

For example, suppose you want to create a single email input you can use across you application.

Markup:

<div class="email-container">
  <label for="email-input">Email</label>
  <input id="email-input" name="email" type="email" [formControl]="control" />
</div>

Component:

import {
  InjectableControl,
  injectableControlProvider,
} from 'ngx-inject-control';

@Component({
  selector: 'app-email-input',
  templateUrl: '...',
  providers: [injectableControlProvider(EmailInputComponent)],
})
export class EmailInputComponent implements InjectableControl {
    constructor(private readonly fb: FormBuilder) {}

    readonly control = this.fb.control(null, [Validators.email]).
}

Using an injectable control

Module:

InjectControlNameDirective is a standalone component and can by imported directly in a module or component.

import { InjectControlNameDirective } from 'ngx-inject-control';


@NgModule({
  declarations: [EmailInputComponent], // Injectable component must be in scope
  imports: [InjectControlNameDirective],
})

Component:

<form [formGroup]="group" (ngSubmit)="onSubmit()">
  <input name="name" type="text" formControlName="name" />
  <app-email-input injectControlName="email"></app-email-input>
  <button>Submit</button>
</form>

@Component({
  selector: 'app-form',
  templateUrl: '...',
})
export class FormComponent {
  constructor(private readonly fb: FormBuilder) {}

  readonly group = this.fb.group({
    name: [null, Validators.required],
    email: [],
  });
}

On render, the injectControlName directive will replace the email field in group with the control field of EmailInputComponent. Validations are recomputed at the time of replacement.

API

InjectControlNameDirective

License

MIT