Untitled

<div class="col-12">
  <div class="card">
    <div class="card-title">
      <h3>{{ isEditMode ? "Edit" : "Create" }}  Menu </h3>
    </div>

    <div class="col-12">
      <form [formGroup]="menuForm" class="form-container">
        <div class="p-fluid p-form grid d-flex flex-column align-items-center col-lg-6 col-md-12 col-sm-12">
          <div class="form-group m-1 col-lg-6 col-md-12 col-sm-12 w-100">
            <label for="title">Menu Name <span class="required">*</span></label>
            <input pInputText id="title" type="text" formControlName="title" />
          </div>

<!--          <div class="form-group m-1 col-lg-6 col-md-12 col-sm-12 w-100">-->
<!--            <label for="type">Menu Type<span class="required">*</span></label>-->
<!--            <input pInputText id="type" type="text" formControlName="type" />-->
<!--          </div>-->
          <div class="form-group m-1 col-lg-6 col-md-12 col-sm-12 w-100">
            <label htmlFor="type">Menu Type <span class="required">*</span></label>
            <p-dropdown [options]="menuTypeList" placeholder="Select Type" formControlName="type" optionLabel="value"
                        optionValue="value" ></p-dropdown>
          </div>
          <div class="form-group m-1 col-lg-6 col-md-12 col-sm-12 w-100 mb-3">
            <label htmlFor="telcoChargeConfigurations">Transaction Type <span class="required">*</span></label>
<!--            <p-dropdown [options]="transactionTypeList" placeholder="Select Transaction Type" formControlName="telcoChargeConfigurations" optionLabel="value"-->
<!--                        [optionValue]="selectedTransactionType" (onChange)="onTelcoChargeConfigChange($event)" ></p-dropdown>-->
            <p-dropdown [options]="transactionTypeList" placeholder="Select Transaction Type"
                        formControlName="telcoChargeConfigurations" optionLabel="value"
                        optionValue="id" (onChange)="onTelcoChargeConfigChange($event)">
            </p-dropdown>

          </div>
          <div class="form-group m-1 col-lg-6 col-md-12 col-sm-12 w-100">
            <label for="title">Menu Priority <span class="required">*</span></label>
            <input pInputText id="priority" type="text" formControlName="priority" />
          </div>
          <form [formGroup]="myForm">
            <label>Child:</label>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-check">
                  <input type="radio" class="form-check-input" id="Menu" formControlName="radioOption" value="Menu" (click)="onRadioChange()" >
                  <label class="form-check-label" for="Menu">Menu</label>
                </div>
              </div>

              <div class="col-sm-6">
                <div class="form-check">
                  <input type="radio" class="form-check-input" id="Option" formControlName="radioOption" value="Option" (click)="onRadioChange()" >
                  <label class="form-check-label" for="Option">Option</label>
                </div>
              </div>
            </div>

            <div *ngIf="myForm.get('radioOption')?.value === 'Menu'" class="mt-3 mb-3">
              <label for="num_children">Enter number of child menus:</label>
              <input type="number" class="form-control" id="num_children" formControlName="num_children">
            </div>
            <div *ngIf="myForm.get('radioOption')?.value === 'Option'" class="mt-3 mb-3">
              <label for="num_option">Enter number of child options:</label>
              <input type="number" class="form-control" id="num_option" formControlName="num_option">
            </div>
<!--            <select class="form-control" id="dropdownValue" formControlName="dropdownValue">-->
<!--              <option *ngFor="let option of generateDropdownOptions()" [value]="option">{{ option }}</option>-->
<!--            </select>-->
            <div class="form-group" *ngIf="showChildMenus">
              <label for="childMenus">Select Child Menu</label>
              <div id="childMenus">
                <div class="form-group" *ngFor="let i of childMenuArray">
                  <label for="childMenus">Child Menu {{i + 1}} :</label>
                  <p-dropdown [options]="childMenuList" placeholder="Select Type" formControlName="ChildMenus" optionLabel="value"
                              optionValue="id" (onChange)="onChildMenuChange($event)"></p-dropdown>
<!--                  <input type="text" name="child_menu_{{i}}" id="child_menu_{{i}}" formControlName="child_menu_{{i}}">-->
                </div>
              </div>
            </div>
            <div class="form-group" *ngIf="showChildOptions">
              <label for="optionInfos">Select Child Option</label>
              <div id="optionInfos">
                <div class="form-group" *ngFor="let i of childOptionArray">
                  <label for="optionInfos">Child Option {{i + 1}}:</label>
                  <p-dropdown [options]="childOptionList" placeholder="Select Type" formControlName="optionInfos" optionLabel="value"
                              optionValue="id" (onChange)="onChildOptionChange($event)"></p-dropdown>
                  <!--                  <input type="text" name="child_menu_{{i}}" id="child_menu_{{i}}" formControlName="child_menu_{{i}}">-->
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="m-3 col-lg-6 col-md-12 col-sm-12 text-center">
          <button class="btn btn-outline-danger m-1" (click)="previousState()">
            Cancel
          </button>

          <button [disabled]="menuForm.invalid" class="btn btn-primary m-1" type="button" (click)="isEditMode ? edit() : create()">
            {{ isEditMode ? "Update" : "Create" }}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>