Form Component

@Input

@Input() configs: FormControlConfig[] | string = [];
@Input() customComponents?: CustomComponents;
@Input() customTemplates?: CustomTemplates;
@Input() conditionsActionFuntions?: ConditionsActionFunctions;
@Input() hideErrorMessage?: boolean;
@Input() collapsibleState?: FormLayout['contentCollapsible'];
@Input() errorComponents?: CustomErrorComponents;
@Input() errorComponentDefault?: Type<CustomErrorMessage>;
@Input() errorTemplates?: CustomTemplates;
@Input() errorTemplateDefault?: TemplateRef<any>;
@Input() labelComponents?: CustomLabelComponents;
@Input() labelComponentDefault?: Type<CustomFormLabel>;
@Input() labelTemplates?: CustomTemplates;
@Input() labelTemplateDefault?: TemplateRef<any>;
@Input() loadingComponent?: Type<any>;
@Input() loadingTemplate?: TemplateRef<any>;
@Input() optionsSources?: { [key: string]: Observable<OptionItem[]> };

configs

See Configs.

customComponents

See Custom Components.

conditionsActionFuntions

See Execute custom function.

hideErrorMessage

Control the display of all the error messages. Useful when need to show all the errors immediately when submit button is clicked.

<ng-dynamic-json-form
  ...
  [formControl]="control"
  [hideErrorMessage]="hideErrors"
></ng-dynamic-json-form>

<button type="submit" (click)="submit()"></button>

control = new FormControl();
hideErrors?: boolean;

submit(): void {
  if (this.control.invalid) {
    this.hideErrors = false;
    return;
  }
  ...
}

In order to trigger change detection, we must leave the hideErrors undefined at first, then set its value later when submit button is pressed.

collapsibleState

Control all of the collapsible states.

optionsSources

The custom observables for options. See Use custom observable.

error...

• errorComponents
• errorComponentDefault
• errorTemplates
• errorTemplateDefault

See Custom Error.

label...

• labelComponents
• labelComponentDefault
• labelTemplates
• labelTemplateDefault

See Custom Label.

loading...

• loadingComponent
• loadingTemplate

See Custom Loading.

@Output

@Output() formGet = new EventEmitter<UntypedFormGroup>();
@Output() optionsLoaded = new EventEmitter();
@Output() displayValue = new EventEmitter<FormDisplayValue>();
@Output() updateStatusFunctions = new EventEmitter<FormStatusFunctions>();

formGet

The event called after form generation complete. The generated UntypedFormGroup will be emitted.

onChange

The event of form value when it's changed by user.

optionsLoaded

The event called after all of the options are loaded.

displayValue

Useful if you need to get the form.value with either:

1. The formControlName replaced with label
2. The option's value replaced with display text

{
  keyMapped: any;
  keyPreserved: any;
}

updateStatusFunctions

Emit all the functions needed to change form status.

{
  setDirty: () => void;
  setPristine: () => void;
  setTouched: () => void;
  setUntouched: () => void;
}