angularangular-climdbootstrap

How ngSwitch works with ngFor and Inputs form


Look at example below, this code works well(i found the example on some web-sites and made on my platform)

<div class="" *ngFor="let item of sellHouseFormsArray" [ngSwitch]="item.tag">
     <ng-template class="" ngSwitchCase="input">
              <div>input works</div>
      </ng-template>
     <ng-template ngSwitchCase="checkbox" >
           <div>checkbox works</div>
     </ng-template>
</div>

However, when i use my code:

   <mdb-form-control class="col-12 col-md-8 mb-4 mx-auto" *ngFor="let item of sellHouseFormsArray" [ngSwitch]="item.tag" >
          <ng-template ngSwitchCase="input">
              <input mdbInput mdbValidate class="form-control" formControlName="{{item.handler}}" type="{{item.type}}" id="{{item.handler}}login"/>
            <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
          </ng-template>
           <ng-template ngSwitchCase="checkbox" >
             <input mdbInput mdbValidate class="form-control col-6" formControlName="{{item.handler}}" type="{{item.type}}" id="{{item.handler}}login"  />
             <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
           </ng-template>
          <ng-template ngSwitchCase="textarea">
            <textarea  mdbInput mdbValidate class="form-control" id="{{item.handler}}login" rows="4" ></textarea>
            <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
          </ng-template>
    </mdb-form-control>

doesn't work!

I don't know what happened, why code doesn't work.

Console gives error: TypeError: Cannot read properties of undefined (reading 'input')


Solution

  • Just an idea. Maybe mdb-form-control requires input as direct child, without ng-template. So maybe try repeat mdb-form-control inside loop and switch like:

    <ng-container *ngFor="let item of sellHouseFormsArray" [ngSwitch]="item.tag">
      <mdb-form-control class="col-12 col-md-8 mb-4 mx-auto" ngSwitchCase="input">
        <input mdbInput mdbValidate class="form-control" formControlName="{{item.handler}}" type="{{item.type}}" id="{{item.handler}}login"/>
        <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
    ...