ng-form-factory simple example

app.component.ts

import { Component } from '@angular/core';
import { FormGroupSchema, createForms } from 'ng-form-factory';
import { MatTextSchema } from './text-form/text-form.component';

interface Person {
  firstName: string;
  lastName: string;
}

const schema: FormGroupSchema<Person> = {
  form: 'group',
  load: 'entity',
  controls: {
    firstName: {
      form: 'control',
      label: 'First Name',
      hint: 'Some hint',
      load: 'text',
    } as MatTextSchema,
    lastName: {
      form: 'control',
      label: 'Last Name',
      hint: 'Some hint',
      load: 'text'
    } as MatTextSchema
  }
};

@Component({
  selector: 'app-root',
  template: '<form-factory [schema]="schema" [form]="form"></form-factory>',
})
export class AppComponent {
  schema = schema;
  form = createForms(schema, { firstName: '', lastName: '' });
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormFactoryModule } from 'ng-form-factory';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormFactoryModule.forRoot({
      text: () => import('./text-form').then(c => c.TextFormComponent),
      entity: () => import('./entity').then(c => c.EntityComponent)
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

entity.ts

port { Component, NgModule, ChangeDetectionStrategy, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EntityBase } from 'ng-form-factory';

@Component({
  selector: 'form-entity',
  template: `
    <ng-container *ngFor="let component of components | keyvalue">
      <ng-template
        [ngComponentOutlet]="component.value.component | async"
        [ngComponentOutletInjector]="component.value.injector"
      ></ng-template>
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EntityComponent extends EntityBase {}

// NgModule MUST be in the same file as the component
@NgModule({
  declarations: [EntityComponent],
  imports: [CommonModule]
})
export class EntityModule { }

text-form.ts

import { Component, NgModule, ChangeDetectionStrategy } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControlSchema, ControlBase } from 'ng-form-factory';

export interface MatTextSchema extends FormControlSchema {
  label: string;
  value?: string;
  hint?: string;
  placeholder?: string;
}

@Component({
  selector: 'form-text',
  template: `
    <ng-container *ngIf="schema">
      <mat-form-field>
        <mat-label *ngIf="schema.label">{{ schema.label }}</mat-label>
        <input matInput [formControl]="form" [placeholder]="schema.placeholder" />
        <mat-hint *ngIf="schema.hint">{{ schema.hint }}</mat-hint>
      </mat-form-field>
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextFormComponent extends ControlBase {
  form: FormControl;
  schema: MatTextSchema;
}

// NgModule MUST be in the same file as the component
@NgModule({
  declarations: [TextFormComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
  ]
})
export class TextFormModule {}