@WidgetComponent

nm-select-dynamic-sub-form

File

src/app/shared/widgets/form/dynamic-form.component.ts

Metadata

selector nm-select-dynamic-sub-form
templateUrl ./dynamic-form.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(halService: HalService)
Parameters :
Name Type Optional
halService HalService no

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig, _group: FormGroup, _action: ActionForm)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
_group FormGroup no
_action ActionForm no
Returns : void
ngOnInit
ngOnInit()
Returns : void
Public subFormChanged
subFormChanged(event: any)
Parameters :
Name Type Optional
event any no
Returns : void

Properties

Public config
config: literal type
Type : literal type
Default value : {}
Public control
control:
Default value : new Subject<any>()
Decorators : WidgetOutput
Public group
group: FormGroup
Type : FormGroup
Public name
name: string
Type : string
Public prompt
prompt: string
Type : string
Public selectedValue
selectedValue: string
Type : string
Public selectOptions
selectOptions: any[]
Type : any[]
Public subForm
subForm: SubForm
Type : SubForm
Public subFormName
subFormName: string
Type : string
import { Component } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { Subject } from "rxjs";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";
import { ActionForm } from "../../components/hal/actionForm";
import { formProperty } from "../../components/hal/hal";
import { HalService } from "../../components/hal/hal.service";

declare var $: any;

export interface SubForm {
  identifier: string;
  action: ActionForm;
  form: FormGroup;
}

@WidgetComponent("nm-select-dynamic-sub-form")
@Component({
  selector: "nm-select-dynamic-sub-form",
  templateUrl: "./dynamic-form.component.html",
})
export class FormSelectDynamicSubFormComponent {
  public name: string;
  public prompt: string;
  public selectOptions: any[];

  public subFormName: string;
  public subForm: SubForm;

  public config: { [key: string]: SubForm } = {};
  public group: FormGroup;

  public selectedValue: string;

  @WidgetOutput()
  public control = new Subject<any>();

  constructor(private halService: HalService) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig,
    _group: FormGroup,
    _action: ActionForm
  ) {
    this.group = _group;
    this.name = configuration.configuration["name"];

    let prop = formProperty(_action, this.name);
    this.prompt = prop.description || configuration.configuration["prompt"];
    this.subFormName =
      prop.subformName || configuration.configuration["subFormName"];

    this.halService.suggestObservable(prop.suggest).subscribe((values) => {
      this.selectOptions = values;
      for (let val of values) {
        this.config[val.value] = {
          identifier: val.value,
          action: val.action[0],
          form: new FormGroup({}),
        };
      }

      if ((this.selectOptions.length = 1)) {
        this.selectedValue = this.selectOptions[0].value;
        this.subFormChanged(this.selectOptions[0].value);
        $(".ui-dropdown-label").each(function (index) {
          if (!$(this).is(":empty")) {
            $(this)
              .closest("p-dropdown")
              .find(".nm-label-forselect")
              .addClass("ui-label-after");
          }
        });
      }
    });

    this.group.addControl(this.name, new FormControl());
    this.group.addControl(this.subFormName, new FormGroup({}));
  }

  ngOnInit() {}

  public subFormChanged(event: any) {
    let form = this.config[event];
    this.group.setControl(this.subFormName, form.form);
    this.subForm = form;
  }
}
<div [formGroup]="group">
  <mat-form-field>
    <mat-select
      style="width: 100%"
      [(ngModel)]="selectedValue"
      [placeholder]="prompt | translate"
      [formControlName]="name"
      [id]="name"
      (onChange)="subFormChanged($event.value)"
    >
      <mat-option *ngFor="let option of selectOptions" [value]="option.value">
        {{ option.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div *ngIf="subForm">
    <nm-form
      style="margin-bottom: 0px"
      [action]="subForm.action"
      [form]="subForm.form"
    ></nm-form>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""