# MUK DYNAMIC FORM

## Usage

```html

<lib-muk-dynamic-form
        [fields]="fields"
        [buttons]="buttons"
        [alignButtons]="alignButtons"
        (onSubmit)="onSubmit($event)"
        (onClose)="onClose($event)"
>
<div content>
  <lib-muk-button >Open Dialog</lib-muk-button>
</div>
</lib-muk-dynamic-form>
```

```typescript
import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    alignButtons = "end";
    fields = [
        <IFormControl<ITextInput>>{
            controller: {
                name: "title",
                controller: this._fb.control(payload?.title ?? null, [
                    Validators.required,
                ]),
            },
            containerStyle: "mb-3",
            placeholder: "enterTitle",
            type: formControlType.input,
            controllerSpecification: <ITextInput>{
                inputType: inputType.text,
            },
            isAutofocus: false,
            isAutocomplete: true,
            columnSize: 6,
            translateLangType: null,
            controllerStyle: null,
        },
    ];
    buttons = [
        {
            matType: ButtonTypes.flat,
            color: ButtonColors.primary,
            text: "submit",
            buttonType: "submit",
        },
        {
            matType: ButtonTypes.flat,
            color: ButtonColors.warn,
            text: "cancel",
            buttonType: "button",
            clicked: async () => {
                this._snackBar.dismiss();
                await this._router.navigate(["/dashboard/virtual-expo"]);
            },
        },
    ];

    onSubmit() {
        console.log("submit");
    }

    onClose() {
        console.log("close");
    }
}
```

### Properties

| Name           | Type                    | Description           |
|----------------|-------------------------|-----------------------|
| `fields`       | `IFormControl<Filed>[]` | Inputs specification  |
| `buttons`      | `IButton[]`             | Buttons specification |
| `alignButtons` | `AlignButtons`          | Buttons alignment     |

### Events

| Name       | Type                | Description  |
|------------|---------------------|--------------|
| `onSubmit` | `EventEmitter<any>` | Submit event |
| `onClose`  | `EventEmitter<any>` | Close event  |