I am facing an issue with rendering a form dynamically using a string in my Angular application.
Upon clicking the "Add Step" button, the template string is supposed to be added to a list and displayed using ngFor directive. However, I am only seeing the <h3> tag on the screen instead of the input field.
Here is what happens before the button click:
https://i.sstatic.net/FctPg.png
And here is how it looks after - the input field does not show up either on the screen or in the HTML:
https://i.sstatic.net/yjgKd.png
This is how the TypeScript code looks like:
scenarioTemplate = `
<div id="content">
<h3>Name</h3>
<input name="{{i}}" [ngModel]="i">
</div>`;
steps = [];
addScenarioStep() {
this.steps.push(this.scenarioTemplate);
}
And here is the corresponding HTML code snippet:
<form #myForm="ngForm">
<fieldset ngModelGroup="inputs" #inputs="ngModelGroup">
<ng-container *ngFor="let step of steps; let i = index">
<div [innerHTML]=step attr.stepId="{{i}}"></div>
</ng-container>
</fieldset>
</form>
<button id="addStepBtn" type="button" class="btn btn-light" (click)="addScenarioStep()">Add Scenario Step +</button>