@7comm/ngx-dialog-form v0.0.3

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

Outputs

Models

DialogConfig

Field

SelectValue

FieldValidator