JSPM – ngx-dynamic-form-builder@0.3.2

Package Exports

ngx-dynamic-form-builder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-dynamic-form-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FormBuilder + class-transformer + class-validator = dynamic form group builder for Angular5+

Installation

npm install --save ngx-dynamic-form-builder class-validator class-transformer

Links

Demo - Demo application with ngx-dynamic-form-builder.

Stackblitz - Simply sample of usage on https://stackblitz.com

Usage

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CompanyPanelComponent } from './company-panel.component';

@NgModule({
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  declarations: [
    ...
    CompanyPanelComponent,
    ...
  ],
  ...
})
export class AppModule {}

company.ts

import { Validate, IsNotEmpty } from 'class-validator';
import { plainToClassFromExist } from 'class-transformer';
import { TextLengthMore15 } from '../utils/custom-validators';

export class Company {
    static strings = {
        id: 'Id',
        name: 'Name'
    };
    static fields = ['id', 'name'];

    id: number;
    @Validate(TextLengthMore15, {
        message: 'The company name must be longer than 15'
    })
    @IsNotEmpty()
    name: string;

    toString() {
        const arr: string[] = [];
        if (arr.length === 0 && this.name) {
            arr.push(this.name);
        }
        return arr.join(' ');
    }

    constructor(data?: any) {
        plainToClassFromExist(this, data);
    }
}

company-panel.component.html

<form [formGroup]="form" novalidate>
    <input formControlName="name" [placeholder]="strings.name">
    <p *ngIf="(form?.customValidateErrors | async)?.name?.length">
      Error: {{(form.customValidateErrors | async).name[0]}}
    </p>
    <p>Form status: {{ form.status | json }}</p>
    <p *ngIf="!form.valid">
      Custom validation errors: {{form.customValidateErrors|async|json}}
    </p>
    <p *ngIf="savedItem">
      Saved item: {{savedItem|json}}
    </p>
    <button (click)="onLoadClick()">Load</button>
    <button (click)="onClearClick()">Clear</button>
    <button (click)="onSaveClick()" [disabled]="!form.valid">Save</button>
</form>

company-panel.component.ts

import { DynamicFormGroup, DynamicFormBuilder } from 'ngx-dynamic-form-builder';
import { Company } from './../../shared/models/company';
import { Input, Component } from '@angular/core';
import { Validators } from '@angular/forms';

@Component({
  selector: 'company-panel',
  templateUrl: './company-panel.component.html'
})
export class CompanyPanelComponent {

  @Input()
  form: DynamicFormGroup<Company>;
  @Input()
  item = new Company({
    'id': 11,
    'name': '123456789012345'
  });
  @Input()
  strings = Company.strings;

  fb = new DynamicFormBuilder();
  savedItem: Company;

  constructor() {
    this.form = this.fb.group(Company, {
      name: ''
    });
  }
  onLoadClick(): void {
    this.savedItem = undefined;
    this.form.object = this.item;
    this.form.validateAllFormFields();
  }
  onClearClick(): void {
    this.savedItem = undefined;
    this.form.object = new Company();
    this.form.validateAllFormFields();
  }
  onSaveClick(): void {
    if (this.form.valid) {
      this.savedItem = this.form.object;
    } else {
      this.form.validateAllFormFields();
    }
  }
}

custom-validators.ts

import {
    ValidatorConstraintInterface, ValidatorConstraint
} from 'class-validator';

@ValidatorConstraint()
export class TextLengthMore15 implements ValidatorConstraintInterface {
    validate(text: string) {
        return text ? text.length > 15 : false;
    }
}

License

MIT