import { Component , OnInit , Inject } from '@angular/core' ; import { MatDialogRef , MAT_DIALOG_DATA } from '@angular/material/dialog' ; import { FormGroup } from '@angular/forms' ; import { FormfieldBase } from './formfield/model/formfield-base' ; import { FormGroupService } from './form-group.service' ; const layoutGap = 2 ; @ Component ( { selector : 'mifosx-form-dialog' , templateUrl : './form-dialog.component.html' , styleUrls : [ './form-dialog.component.scss' ] } ) export class FormDialogComponent implements OnInit { layout : { columns : number ; columnWidth ? : number ; flex ? : number ; gap ? : number ; cancelButtonText ? : string ; addButtonText ? : string ; } = { columns : 1 , columnWidth : 400 , flex : 100 , cancelButtonText : 'Cancel' , addButtonText : 'Add' } ; form : FormGroup ; formfields : FormfieldBase [ ] ; pristine : boolean ; constructor ( public dialogRef , @ Inject ( MAT_DIALOG_DATA ) public data , private formGroupService ) { this . dialogRef . disableClose = data . disableClose !== undefined ? data . disableClose : true ; this . formfields = data . formfields . sort ( ( formfieldA , formfieldB ) => formfieldA . order - formfieldB . order ) ; this . pristine = data . pristine !== undefined ? data . pristine : true ; this . layout = { ... this . layout , ... data . layout } ; this . layout . gap = this . layout . columns > 1 ? layoutGap : 0 ; this . layout . flex = ( this . layout . flex / this . layout . columns ) - this . layout . gap ; } ngOnInit ( ) { this . dialogRef . updateSize ( `${ this . layout . columnWidth * this . layout . columns }px` ) ; this . form = this . formGroupService . createFormGroup ( this . formfields ) ; if ( ! this . pristine ) { this . form . markAsDirty ( ) ; } } }