Return to Answer

export class FormFieldUI extends FormField { public FieldDisplayId: string; public FieldFormControl: FormControl; public ParentSectionFormGroup: FormGroup; public MainFormGroup: FormGroup; public ParentFormSectionUI: FormSectionUI; public ValueChange: EventEmitter<any> = new EventEmitter<any>(); static buildFormControl(formFieldUI:FormFieldUI): FormControl { let nullValidator = Validators.nullValidator; let fieldKey: string = formFieldUI.FieldDisplayId; let fieldValue: any; switch (formFieldUI.ColumnType) { default: fieldValue = formFieldUI.Value; break; } let isDisabled = !formFieldUI.IsEnabled; let validatorsArray: ValidatorFn[] = new Array<ValidatorFn>(); let asyncValidatorsArray: AsyncValidatorFn[] = new Array<AsyncValidatorFn>(); let formControl = new FormControl({ value: fieldValue, disabled: isDisabled }, validatorsArray, asyncValidatorsArray); return formControl; } } 

export class FormSectionUI extends FormSection { constructor(formSection: FormSection) { this.SectionDisplayId = 'section' + this.SectionId.toString(); } SectionDisplayId: string; FieldsUI: Array<FormFieldUI>; HiddenFieldsUI: Array<FormFieldUI>; SectionFormGroup: FormGroup; MainFormGroup: FormGroup; ParentFormSchemaUI: FormSchemaUI; static fromFormSectionData(formSection: FormSection): FormSectionUI { let formSectionUI = new FormSectionUI(formSection); formSectionUI.FieldsUI = new Array<FormFieldUI>(); formSectionUI.HiddenFieldsUI = new Array<FormFieldUI>(); formSectionUI.Fields.forEach(field => { let fieldUI = FormFieldUI.fromFormFieldData(field); if (fieldUI.ColumnType != 'HIDDEN') formSectionUI.FieldsUI.push(fieldUI); else formSectionUI.HiddenFieldsUI.push(fieldUI); }); formSectionUI.SectionFormGroup = FormSectionUI.buildFormSectionFormGroup(formSectionUI); return formSectionUI; } static buildFormSectionFormGroup(formSectionUI: FormSectionUI): FormGroup { let obj = {}; formSectionUI.FieldsUI.forEach(fieldUI => { obj[fieldUI.FieldDisplayId] = fieldUI.FieldFormControl; }); let sectionFormGroup = new FormGroup(obj); return sectionFormGroup; } } 

=============================================

export class FormFieldUI extends FormField {  constructor(formField: FormField) { super(); this.FieldDisplayId = 'field' + this.FieldId.toString(); this.ListItems = new Array<SelectListItem>(); } public FieldDisplayId: string; public FieldFormControl: FormControl; public ParentSectionFormGroup: FormGroup; public MainFormGroup: FormGroup; public ParentFormSectionUI: FormSectionUI; public ValueChange: EventEmitter<any> = new EventEmitter<any>(); static buildFormControl(formFieldUI:FormFieldUI): FormControl { let nullValidator = Validators.nullValidator; let fieldKey: string = formFieldUI.FieldDisplayId; let fieldValue: any; switch (formFieldUI.ColumnType) { default: fieldValue = formFieldUI.Value; break; } let isDisabled = !formFieldUI.IsEnabled; let validatorsArray: ValidatorFn[] = new Array<ValidatorFn>(); let asyncValidatorsArray: AsyncValidatorFn[] = new Array<AsyncValidatorFn>(); let formControl = new FormControl({ value: fieldValue, disabled: isDisabled }, validatorsArray, asyncValidatorsArray); return formControl; } } 

The HTML is backed up by typescript classes.

<ng-container> <div class="row"> <div class="col-md-4 col-lg-4 text-right"> <label for="{{fieldUI.FieldDisplayId}}"> {{fieldUI.Label}} </label> </div> <div class="col-md-8 col-lg-8"> <div app-ci-field-edit [fieldUI]="fieldUI" ></div> </div> </div> </ng-container> 

The HTML is backed up by typescript classes. Those are not here as they do not have much special. Just the FormSchemaUI, FormSectionUI and FormFieldUI are important.

Also please take note that formSchema: FormSchema is a JSON object that I receive from a service. Any properties of the UI classes that you do not see defined are inherited from their base Data clases. Those are not presented here. The hierarchy is: FormSchema contains multiple sections. A section contains multiple fields.

<ng-container> <div class="row"> <div class="col-md-4 col-lg-4 text-right"> <label for="{{fieldUI.FieldDisplayId}}"> {{fieldUI.Label}} </label> </div> <div class="col-md-8 col-lg-8"> <div app-ci-field-edit [fieldUI]="fieldUI" ></div> </div> </div> </ng-container> 

=============================================

<ng-container [formGroup]="fieldUI.ParentSectionFormGroup"> <ng-container *ngIf="fieldUI.isEnabled"> <ng-container [ngSwitch]="fieldUI.ColumnType"> <input *ngSwitchCase="'HIDDEN'" type="hidden" id="{{fieldUI.FieldDisplayId}}" [value]="fieldUI.Value" /> <ci-field-textbox *ngSwitchDefault  [fieldUI]="fieldUI" (valueChange)="onValueChange($event)" class="fullWidth" style="width:100%"> </ci-field-textbox> </ng-container> </ng-container> </ng-container> 

export class FormFieldUI extends FormField { public FieldDisplayId: string; public FieldFormControl: FormControl; public ParentSectionFormGroup: FormGroup; public MainFormGroup: FormGroup; public ParentFormSectionUI: FormSectionUI;  public ListItems: Array<SelectListItem>; public SelectedItem: SelectListItem; public SelectedItemsArray: Array<SelectListItem>; public IsChecked: boolean = false; public DateValue: Date = undefined; public ValueChange: EventEmitter<any> = new EventEmitter<any>(); static buildFormControl(formFieldUI:FormFieldUI): FormControl { let nullValidator = Validators.nullValidator; let fieldKey: string = formFieldUI.FieldDisplayId; let fieldValue: any; switch (formFieldUI.ColumnType) { default: fieldValue = formFieldUI.Value; break; } let isDisabled = !formFieldUI.IsEnabled; let validatorsArray: ValidatorFn[] = new Array<ValidatorFn>(); let asyncValidatorsArray: AsyncValidatorFn[] = new Array<AsyncValidatorFn>(); let formControl = new FormControl({ value: fieldValue, disabled: isDisabled }, validatorsArray, asyncValidatorsArray); return formControl; } } 

=============================================

=============================================

=============================================

export class FormFieldUI extends FormField { public FieldDisplayId: string; public FieldFormControl: FormControl; public ParentSectionFormGroup: FormGroup; public MainFormGroup: FormGroup; public ParentFormSectionUI: FormSectionUI; public ValueChange: EventEmitter<any> = new EventEmitter<any>(); static buildFormControl(formFieldUI:FormFieldUI): FormControl { let nullValidator = Validators.nullValidator; let fieldKey: string = formFieldUI.FieldDisplayId; let fieldValue: any; switch (formFieldUI.ColumnType) { default: fieldValue = formFieldUI.Value; break; } let isDisabled = !formFieldUI.IsEnabled; let validatorsArray: ValidatorFn[] = new Array<ValidatorFn>(); let asyncValidatorsArray: AsyncValidatorFn[] = new Array<AsyncValidatorFn>(); let formControl = new FormControl({ value: fieldValue, disabled: isDisabled }, validatorsArray, asyncValidatorsArray); return formControl; } }