ngx-automatic-formbuilder
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

NgxAutomaticFormbuilder

This is a Extended FormBuilder. You can Pass in a Config object and it generates a FormGroup.

How to install

npm i ngx-automatic-formbuilder

How to use

import it into Your Module

import into AppModule

import { AutomaticFormbuilderModule } from 'projects/ngx-automatic-formbuilder/src/public-api';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AutomaticFormbuilderModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

The config object looks similar to the FormBuilder config

IFormSettings

export interface IFormSettings {
  [key: string]:
    | [any, ValidatorFn[]?, AsyncValidatorFn[]?, IExtFormControlSettings?]
    | IFormSettings;
}

Get AutomaticFormBuilder via DI and kick it off with your settings

  constructor(builderAutomaticFormBuilder) {
    this.myForm = builder.setupForm(this.settings);
  }

FormSettings

settingsIFormSettings = {
  user: [
    '',
    [Validators.required],
    [],
    { type: 'text', errormsg: { required: 'User is required!' } }
  ],
  company: {
    name: ['', []],
    url: ['', []],
    address: {
      street: [''],
      city: [''],
      zip: ['']
    }
  }
};

It can Handle SubGroups as well.

In my example I use this:

You can add the highly needed information to each FormControl to autogenerate the form in your template.

IExtFormControl

export interface IExtFormControl extends FormControl {
  errormsg: {
    [key: string]: string;
  };
  type: string;
  label: string;
}

And in your template you can use this like this

Template use

<form [formGroup]="myForm">
  <div class="form-group" *ngFor="let itm of dynKeys">
    <div *ngIf="!myForm.get(itm).controls">
      <label [for]="itm">{{ itm }}</label>
      <input
        [type]="myForm.get(itm)?.type"
        [id]="itm"
        [formControlName]="itm"
      />
      <div [hidden]="!myForm.get(itm).hasError('required')">
        {{ myForm.get(itm).errormsg?.required }}
      </div>
    </div>
  </div>
</form>

Maybe this is helpfull in some way.

I know there are no tests at all.

I will add them by time.

contribution is very wellcome!

Readme

Keywords

none

Package Sidebar

Install

npm i ngx-automatic-formbuilder

Weekly Downloads

1

Version

0.0.3

License

none

Unpacked Size

116 kB

Total Files

41

Last publish

Collaborators

  • web-dave