angular - Getting form's input type from TypeScript - Stack Overflow

admin管理员组

文章数量:1122832

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.

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.

• angular
• typescript
• angular-reactive-forms
• angular-forms
• angular-dynamic-forms

Share Improve this question Follow edited Nov 21, 2024 at 23:58 Naren Murali 54.6k55 gold badges4040 silver badges7070 bronze badges asked Nov 21, 2024 at 21:03 user6781user6781 29122 silver badges1414 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

The reason what you are trying won't work is because input[type=checkbox] is part of the selector for the directive CheckboxControlValueAccessor. By trying making the type attribute dynamic, you are preventing the directive from being used, since directive selectors are found at compile time and therefore only work with static values.

One way to accomplish what you're trying to do is with a @switch block where every expected input type is handled.

@switch(file.type) {
  @case('checkbox') {
    <input type="checkbox" [formControlName]="field.formControlName" />
  }
  @default {
    <input type="text" [formControlName]="field.formControlName" />
  }
}

Well, very minor mistake my friend!

<div class="form-floating mb-3">
   <!-- Just add checked property below -->
   <input type="{{field.type}}" formControlName="{{field.formControlName}}" [checked]="field.value" />
   <label class="form-label">
      {{field.label}}
   </label> 
 </div> 

Hope that helps!

Added StackBlitz demo for reference.

本文标签： angularGetting form39s input type from TypeScriptStack Overflow