[Fixed] Getting errors with a dynamic form and interpolation

Issue

I’m receiving the following errors for each property:

Here is my component.ts method:

public uiListElement: UIListElement[] = [];

createUIListElements() {
    xml2js.parseString(this.xml, (err, result) => {
      result = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement']
      this.uiListElement = result.map(data => data as UIListElement[])
      console.log(this.uiListElement);
    })
  }

Here is my UIListElement interface:

export interface UIListElement {
    $: { id: string; name: string; }
    UIElement:
    {
        $:
        {
            id: string;
            maxlength: string;
            name: string;
            required: string;
            type: string;
        }
    }
}

Here is my HTML:

<div *ngIf="uiListElement">
    <div *ngFor="let form of uiListElement">
        <h2>
            {{form.$.name}}
        </h2>
        <div class="row pb-2" [formGroup]="xmlForm">
                <div class="form-group" [ngSwitch]="form.UIElement.$.type">
                    <div *ngSwitchCase="'string'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.UIElement.$.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.UIElement.$.name" placeholder="" id="input1"
                            aria-describedby="Text field" name="name" class="form-control ng-untouched ng-pristine ng-valid"
                            ng-reflect-name="name" ng-reflect-model="">
                        <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                            <small class="error" *ngIf="xmlForm.get(form.UIElement.$.name).errors?.required">
                                {{form.UIElement.$.name}} is Required
                            </small>
                        </div>
                        <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty">
                            <small class="error" *ngIf="xmlForm.get(form.UIElement.$.name).errors?.maxlength">
                                Max Length is {{form.UIElement.$.maxlength}}
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'number'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.UIElement.$.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.UIElement.$.name" placeholder="" id="input1"
                            aria-describedby="Text field" name="name" class="form-control ng-untouched ng-pristine ng-valid"
                            ng-reflect-name="name" ng-reflect-model="">
                        <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                            <small class="error" *ngIf="!xmlForm.get(form.UIElement.$.name).valid">
                                {{form.UIElement.$.name}} is Required
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'boolean'">
                        <label>
                            <input type="radio" [formControlName]="form.UIElement.$.name" value="{{form.name}}"> {{form.UIElement.$.name}}
                            <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                                <small class="error" *ngIf="!xmlForm.get(form.UIElement.$.name).valid">
                                    {{form.UIElement.$.name}} is Required
                                </small>
                            </div>
                        </label>
                    </div>
                </div>
            
        </div>
    </div>
</div>

My console.log(this.uiListElement); shows there is data:

I cannot figure out why I am getting these errors. My hope is I can resolve the interpolation errors

Solution

In your example,this.uiListElement is an array of UIListElement.
This means that when you loop through this property in the <div *ngFor="let form of uiListElement">, form is an array of UIElement and you trying to access the property type of this array which is undefinded.
So you need to add another loop, that iterates through the form.UIElement array.