How to use @ng-dynamic-forms/core - 10 common examples

input1ModelConfig.placeholder = this.firstPlaceholder;
    }

    if (isNotEmpty(this.secondPlaceholder)) {
      input2ModelConfig.placeholder = this.secondPlaceholder;
    }

    // Split placeholder if is like 'placeholder1/placeholder2'
    const placeholder = this.configData.label.split('/');
    if (placeholder.length === 2) {
      input1ModelConfig.placeholder = placeholder[0];
      input2ModelConfig.placeholder = placeholder[1];
    }

    const model1 = new DynamicInputModel(input1ModelConfig, clsInput);
    const model2 = new DynamicInputModel(input2ModelConfig, clsInput);
    concatGroup.group.push(model1);
    concatGroup.group.push(model2);

    clsGroup = {
      element: {
        control: 'form-row',
      }
    };
    const concatModel = new DynamicConcatModel(concatGroup, clsGroup);
    concatModel.name = this.getFieldId();

    // Init values
    if (isNotEmpty(fieldValue)) {
      concatModel.value = fieldValue;
    }

'groupUUID',
              (model.parent as DynamicFormArrayGroupModel).group) as DynamicSelectModel;

            this.availableAccessConditionGroups.forEach((group) => {
              groupOptions.push({
                label: group.name,
                value: group.uuid
              })
            });

            // Due to a bug can't dynamically change the select options, so replace the model with a new one
            const confGroup = { relation: groupModel.relation };
            const groupsConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_CONFIG, confGroup);
            groupsConfig.options = groupOptions;
            model.parent.group.pop();
            model.parent.group.push(new DynamicSelectModel(groupsConfig, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_LAYOUT));
          }

        }
        if (accessCondition.hasStartDate) {
          const startDateModel = this.formBuilderService.findById(
            'startDate',
            (model.parent as DynamicFormArrayGroupModel).group) as DynamicDateControlModel;

          const min = new Date(accessCondition.maxStartDate);
          startDateModel.max = {
            year: min.getFullYear(),
            month: min.getMonth() + 1,
            day: min.getDate()
          };
        }
        if (accessCondition.hasEndDate) {

{
                            ...config,
                            layout: merge_layouts(config.layout,
                                {
                                    grid: {
                                        host: `dadf-column-${csf.controls.length}`
                                    }
                                }
                            )
                        });
                    if (_control) {
                        model.push(_control);
                    }
                }

                return new DynamicFormGroupModel(
                    {
                        id: 'generated_' + this.last_id++,
                        group: model
                    },
                    merge_layouts(
                        field_config.layout,
                        {
                            grid: {
                                control: `dadf-columns dadf-columns-${csf.controls.length}`
                            },
                            // element: {
                            //     container: '---container',
                            //     control: '---control',
                            //     errors: '---errors',
                            //     group: '---group',
                            //     hint: '---hint',

const configForm = Object.assign({}, this.configMetadataForm, {
      fields: Object.assign([], this.configMetadataForm.rows[0].fields[0], [
        this.configMetadataForm.rows[0].fields[0],
        configDescr
      ])
    });
    const formModel: DynamicFormControlModel[] = [];
    const metadataGroupModelConfig = Object.assign({}, BITSTREAM_METADATA_FORM_GROUP_CONFIG);
    metadataGroupModelConfig.group = this.formBuilderService.modelFromConfiguration(
      configForm,
      this.collectionId,
      this.fileData.metadata,
      undefined,
      this.submissionService.getSubmissionScope()
    );
    formModel.push(new DynamicFormGroupModel(metadataGroupModelConfig, BITSTREAM_METADATA_FORM_GROUP_LAYOUT));
    const accessConditionTypeModelConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_CONFIG);
    const accessConditionsArrayConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG);
    const accessConditionTypeOptions = [];

    if (this.collectionPolicyType === POLICY_DEFAULT_WITH_LIST) {
      for (const accessCondition of this.availableAccessConditionOptions) {
        accessConditionTypeOptions.push(
          {
            label: accessCondition.name,
            value: accessCondition.name
          }
        );
      }
      accessConditionTypeModelConfig.options = accessConditionTypeOptions;

      // Dynamically assign of relation in config. For startdate, endDate, groups.

configDescr.repeatable = false;
    const configForm = Object.assign({}, this.configMetadataForm, {
      fields: Object.assign([], this.configMetadataForm.rows[ 0 ].fields[ 0 ], [
        this.configMetadataForm.rows[ 0 ].fields[ 0 ],
        configDescr
      ])
    });
    const formModel: DynamicFormControlModel[] = [];
    const metadataGroupModelConfig = Object.assign({}, BITSTREAM_METADATA_FORM_GROUP_CONFIG);
    metadataGroupModelConfig.group = this.formBuilderService.modelFromConfiguration(
      configForm,
      this.collectionId,
      this.fileData.metadata,
      this.submissionService.getSubmissionScope()
    );
    formModel.push(new DynamicFormGroupModel(metadataGroupModelConfig, BITSTREAM_METADATA_FORM_GROUP_LAYOUT));
    const accessConditionTypeModelConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_CONFIG);
    const accessConditionsArrayConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG);
    const accessConditionTypeOptions = [];

    if (this.collectionPolicyType === POLICY_DEFAULT_WITH_LIST) {
      for (const accessCondition of this.availableAccessConditionOptions) {
        accessConditionTypeOptions.push(
          {
            label: accessCondition.name,
            value: accessCondition.name
          }
        );
      }
      accessConditionTypeModelConfig.options = accessConditionTypeOptions;

      // Dynamic assign of relation in config. For startdate, endDate, groups.

export function xsrfFactory() {
    return new CookieXSRFStrategy('csrftoken', 'X-CSRFToken');
}


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        DynamicFormsCoreModule.forRoot(),
        DynamicFormsMaterialUIModule,
        MdCardModule,
        DjangoFormModule,
        MatProgressSpinnerModule,
        MatButtonModule,
        MatTabsModule,
        MatDialogModule,
        FlexLayoutModule,
        MatSelectModule,
        MatRadioModule,
    ],
    providers: [
        {
            // use django csrf cookie for HTTP PUT/POST/DELETE
            provide: XSRFStrategy,
            useFactory: xsrfFactory

*   ]
 * })
 * class AppModule {}
 * ```
 *
 */
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // TODO - commenting this out for now as it seems to prevent the angular router from clearing it's child elements on route changes
    //BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    DynamicFormsCoreModule.forRoot(),
    RestangularModule.forRoot([ConfigService], restangularProviderConfigurer),
    TabsModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    BsDropdownModule.forRoot(),
    CollapseModule.forRoot(),
    AlertModule.forRoot(),
    PopoverModule.forRoot(),
    TypeaheadModule.forRoot(),
    TagInputModule,
    AppRoutingModule,
    StoreModule,
    SyndesisCommonModule.forRoot(),
    DataMapperModule,
    NotificationModule,
    TourNgxBootstrapModule.forRoot()

const type = new DynamicSelectModel(accessConditionTypeModelConfig, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT);
        const startDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG, confStart);
        const endDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG, confEnd);
        const groupsConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_CONFIG, confGroup);

        const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
        const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
        const groups = new DynamicSelectModel(groupsConfig, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_LAYOUT);

        return [type, startDate, endDate, groups];
      };

      // Number of access conditions blocks in form
      accessConditionsArrayConfig.initialCount = isNotEmpty(this.fileData.accessConditions) ? this.fileData.accessConditions.length : 1;
      formModel.push(
        new DynamicFormArrayModel(accessConditionsArrayConfig, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT)
      );

    }
    this.initModelData(formModel);
    return formModel;
  }

const type = new DynamicSelectModel(accessConditionTypeModelConfig, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT);
        const startDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG, confStart);
        const endDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG, confEnd);
        const groupsConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_CONFIG, confGroup);

        const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
        const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
        const groups = new DynamicSelectModel(groupsConfig, BITSTREAM_FORM_ACCESS_CONDITION_GROUPS_LAYOUT);

        return [ type, startDate, endDate, groups ];
      };

      // Number of access conditions blocks in form
      accessConditionsArrayConfig.initialCount = isNotEmpty(this.fileData.accessConditions) ? this.fileData.accessConditions.length : 1;
      formModel.push(
        new DynamicFormArrayModel(accessConditionsArrayConfig, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT)
      );

    }
    this.initModelData(formModel);
    return formModel;
  }

it('should insert a form control to an existing form group', () => {

    const formGroup = service.createFormGroup(testModel);
    const nestedFormGroup = formGroup.controls.testFormGroup as FormGroup;
    const nestedFormGroupModel = testModel[7] as DynamicFormGroupModel;
    const newModel1 = new DynamicInputModel({id: 'newInput1'});
    const newModel2 = new DynamicInputModel({id: 'newInput2'});

    service.insertFormGroupControl(4, formGroup, testModel, newModel1);
    service.insertFormGroupControl(0, nestedFormGroup, nestedFormGroupModel, newModel2);

    expect(formGroup.controls[newModel1.id]).toBeTruthy();
    expect(testModel[4] === newModel1).toBe(true);
    expect(service.getPath(testModel[4])).toEqual(['newInput1']);

    expect((formGroup.controls.testFormGroup as FormGroup).controls[newModel2.id]).toBeTruthy();
    expect(nestedFormGroupModel.get(0) === newModel2).toBe(true);
    expect(service.getPath(nestedFormGroupModel.get(0))).toEqual(['testFormGroup', 'newInput2']);
  });