Getting form's input type from TypeScript

I am defining the type of my form's fields in the ts, like following:


myFormFields = [{
label: 'Active',
formControlName: 'active',
value: false,
type: 'checkbox'
}]


Then in the html I'm trying to show them, like following:

<div class="form-floating mb-3">
<input type="{{field.type}}" formControlName="{{field.formControlName}}" />
<label class="form-label">
{{field.label}}
</label>
</div>




The problem is that, if I define the type of the input by type="{{field.type}}" its value is not considered, i.e., it is never checked! But if I use type="checkbox", then it is checked when the value is true and non-checked if it is false.

I checked the Inspect, the only difference I could see was that, when input type is defined by field.type it has value property, like :

//(checkbox is not checked.)
<input _ngcontent-ng-c3053247743="" type="checkbox" ng-reflect-name="active"
ng-reflect-ng-class="[object Object]" value="true" class="ng-untouched ng-pristine ng-valid">


but when it is set to type='checkbox' it does not have any value property:

//(checkbox is checked.)
<input _ngcontent-ng-c2417600516="" type="checkbox" ng-reflect-name="active"
ng-reflect-ng-class="[object Object]" class="ng-untouched ng-pristine ng-valid">


Does anyone know what is the problem? Thank you in advance.

Continue reading...