zzpzaf

<form
  class="q2container"
  [formGroup]="dynFormGroup"
  (ngSubmit)="onFormSubmit($event)"
>
  <div *ngFor="let field of formFields">
    <div [ngSwitch]="field.controlType">
      <div *ngSwitchCase="'input'">
        <ng-template [ngIf]="field.inputType === 'radio'" [ngIfElse]="other">
          <label *ngFor="let option of field.options">

zzpzaf

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ItemsFormFieldsService } from '../items-form-fields.service';
import { Subscription } from 'rxjs';
import { IFormField } from '../dataObjects/IFormField';

@Component({
  selector: 'dyn-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],

zzpzaf

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ItemsFormFieldsService } from '../items-form-fields.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-request-data',
  templateUrl: './request-data.component.html',
  styleUrls: ['./request-data.component.scss']

zzpzaf

import { Injectable } from '@angular/core';
import { IItem } from './dataObjects/iitem';
import { BehaviorSubject, Observable } from 'rxjs';
import { ICategory } from './dataObjects/icatecory';
import { ItemsFormFields } from './dataObjects/itemFormFields';
import { IFormField, IFormOptions } from './dataObjects/IFormField';
import { DataService } from './data.service';

@Injectable({
  providedIn: 'root',

zzpzaf

import { IFormField } from "./IFormField";

export const ItemsFormFields: IFormField[] = [


        {
          dataField: 'itemId',
          controlType: 'input',
          controlName: 'itemId',
          fieldLabel: 'Item Id:',

zzpzaf

export type standardInputType =
  | 'color'
  | 'checkbox'
  | 'date'
  | 'datetime-local'
  | 'email'
  | 'month'
  | 'number'

zzpzaf

<!-- <p>datetime works!</p> -->


<mat-form-field>
  <div [formGroup]="fGroup" class="mat-dtpicker">
      <mat-label>{{ field.fieldLabel }}</mat-label>
      <mtx-datetimepicker
      #datetimePicker
      [type]="mtxType"
      

zzpzaf

import { Component } from '@angular/core';
import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
import { MtxDatetimepickerType, MtxDatetimepickerMode, MtxCalendarView } from '@ng-matero/extensions/datetimepicker';
import { IFormField } from 'src/app/dataObjects/IFormField';

@Component({
  selector: 'form-datetime',
  templateUrl: './datetime.component.html',
  styleUrls: ['../form/form.component.scss',
              './datetime.component.scss'

zzpzaf

// ******************************************************************
// Note for Theming the Datetimepicker of the matero/extensions:
// ------------------------------------------------------------------ 
// See more, for the newer versions, at 
// https://github.com/ng-matero/extensions 
// and for older version prior 12, see at:
// https://www.npmjs.com/package/@ng-matero/extensions/v/11.5.0
// In the section "Theming"
// For general Angular Material Theming, see at:
// https://material.angular.io/guide/theming#themes

zzpzaf

<!-- <p>select works!</p> -->

<mat-form-field>
    <div [formGroup]="fGroup">
        <div class="form-field">
            <mat-label>{{ field.fieldLabel }}</mat-label>
            <mat-select 
            [formControlName]="field.controlName"
            [id]="field.controlName"
            [multiple]="field.multipleOptions"