Ion-input is always readonly

I have just started experimenting with ionic and have tried the example from Open-Source Form Builder for Creating Ionic Forms in Angular 2

No matter what I try but every comes as similar to a label, which means I can’t get edit it. Here is a snippet of the template I have -


@Component({
  template: '
    <form [ngFormModel]="todo" (ngSubmit)="logForm();">
	  <ion-item>
		<ion-input type="text" formControlName="test"></ion-input>
	  </ion-item>
	  <ion-item>
        <ion-label floating>Todo</ion-label>
        <ion-input type="text" formControlName="title" [disabled]="false" required>Title goes here</ion-input> 
      </ion-item>
      <ion-item>
        <ion-label>Description</ion-label>
        <ion-textarea formControlName="description">jghjghj</ion-textarea>
      </ion-item>
      <button ion-button type="submit" [disabled]="!todo.valid">Create</button>
    </form>
  '
})

export class FormsPage implements OnInit{
	
	private todo : FormGroup;

  constructor(public formBuilder: FormBuilder) {
  
    this.todo = this.formBuilder.group({
      title: ['', Validators.required],
      description: ['']
    });
  }
  
  ngOnInit(): any {
	this.todo = this.formBuilder.group({
		title: ['', Validators.required],
		description: ['']
	});
  }

  logForm(){
    console.log(this.todo.value);
  }
}

This is what show on web -
image

In case needed my ionic info is -

Cordova CLI: 6.3.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 7 SP1
Node Version: v0.12.2

Any ideas to suggest what am I missing would be welcome.

1 Like