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 -
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.