NgxDialogForm

This library was generated with Angular CLI version 14.2.0.

Installing

$ npm install --save @7comm/ngx-dialog-form

Quickstart

Import @7comm/ngx-dialog-form module in Angular app:

import { NgxDialogFormModule } from 'ngx-dialog-form';

@NgModule({
  imports: [
    NgxDialogFormModule
  ]
})

In your HTML file:

<ngx-dialog-form [eventToOpenDialog]="eventsSubject.asObservable()" [config]="dialogConfig" (eventOnSubmit)="outputOnSubmit($event)"></ngx-dialog-form>

In your TS File:

export class AppComponent implements OnInit {

 eventsSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  dialogConfig: any = {
    dialogTitle: 'Filtros exemplo',
    cancelBtnTitle: 'Cancelar',
    submitBtnTitle: 'Filtrar',
    width: '1300px',
    height: '700px',
    flexGapPx: 20,
    fields: [
      {
        id: 'teste',
        type: 'select',
        flexWidthPercent: 50,
        defaultValue: '',
        selectValues: [
          {label: 'Teste label', value: 'testeValue'}
        ],
        selectEmptyLabel: 'Selecione um item',
        fieldValidators: [],
        label: 'Teste label'
      },
      {
        id: 'teste2',
        type: 'date',
        flexWidthPercent: 25,
        defaultValue: '',
        fieldValidators: [],
        label: 'Teste 2 label'
      },
      {
        id: 'teste3',
        type: 'date',
        flexWidthPercent: 50,
        defaultValue: '',
        fieldValidators: [],
        label: 'Teste 3 label',
        minFieldId: 'teste2'
      },
      {
        id: 'teste4',
        type: 'text',
        flexWidthPercent: 50,
        defaultValue: '',
        fieldValidators: [
          {
            validator: Validators.required,
            id: 'required',
            errorMessage: 'Este campo é obrigatório'
          }
        ],
        label: 'Teste 4 label'
      },
    ]
  };
  
  constructor() {
  }

  ngOnInit() {
    this.eventsSubject.next(true);
  }

  public outputOnSubmit(formResponse: any) {
    console.log('response from dialog -> ', formResponse);
  }
}

Inputs

| Name | Type | Description | | --- | --- | --- | | eventToOpenDialog | Observable (from "rxjs") | Event trigger to open the dialog | | config | DialogConfig | Configuration for the dialog |

Outputs

| Name | Type | Description | | --- | --- | --- | | eventOnSubmit | EventEmitter (from "@angular/core") | Event triggered on submit the dialog form |

Models

DialogConfig

| Name | Type | Example | Description | | --- | --- | --- | --- | | width | string | 200 | desc | | height | string | 100 | desc | | flexGapPx | number | 20 | desc | | dialogTitle | string | Title | desc | | cancelBtnTitle | string | Cancel | desc | | submitBtnTitle | string | Submit | desc | | fields | Field[] | [] | desc |

Field

| Name | Type | Example | Description | | --- | --- | --- | --- | | id | string | fieldId | desc | | label | string | Field Label | desc | | type | 'text' | 'number' | 'select' | 'date' | Field Label | desc | | flexWidthPercent | number | 25 | desc | | defaultValue | any | fieldValue | desc | | fieldValidators | FieldValidator[] | [] | desc | | selectValues | SelectValue[] | [] | desc | | selectEmptyLabel | string | Choose an item | desc | | minFieldId | string | fieldId | desc | | maxFieldId | string | fieldId | desc |

SelectValue

| Name | Type | Example | Description | | --- | --- | --- | --- | | label | string | Label | desc | | value | any | value | desc |

FieldValidator

| Name | Type | Example | Description | | --- | --- | --- | --- | | validator | ValidatorFn (from "@angular/forms") | Validators.required | desc | | id | string | required | desc | | errorMessage | string | Field id required | desc |