Dynamic setting input type in Angular

Question

Please can anybody explain why this code doesnt work, i try set input types dynamically, but this is not working.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule }   from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form #f="ngForm">

      <input [type]="rtype" value="beef" name="food" [(ngModel)]="myFood"> Beef
      <input [type]="rtype" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
      <input [type]="rtype" value="fish" name="food" [(ngModel)]="myFood"> Fish
    </form>

    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
  `,
})
export class App {
  name:string;
  myFood = 'lamb';
  rtype='radio';
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule,FormsModule       ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

also i try use type={{rtype}}, but this also doesnt work

I am read this https://angular.io/guide/template-syntax#html-attribute-vs-dom-property. But not understand why it is not working in Angular. May be angular not call https://angular.io/api/forms/RadioControlValueAccessor. Please explain.

Also when i create simple radio in html, and then try change the input type property from console it works fine for example was input.type="radio", became input.type="checkbox" in browser i see that radio changed to the normal checkbox.

My plnkr http://plnkr.co/edit/rwJPe2YZ9axMns0NaMNJ?p=preview

Phael · Accepted Answer · 2017-08-26 19:59:37Z

2

I used this before

<input type="{{inputType}}" />

In your component:

inputType: string = "radio"

answered Aug 26, 2017 at 19:59

Phael

995 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic setting input type in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related