After a few hours of banging my head against my desk, Im ready for an education. Im a newbie to Ionic2/Angular2, so forgive me if my code is not perfectly refactored.
I have a form which has an item. This item is one of many on my form that will correspond to data stored in a JSON object. I have the form successfully loading the JSON data with out the modal, but when I add the modal, it breaks.
<ion-item *ngSwitchCase="'group'" >
<button item-right (click)="gotoAddKidsModal()"><ion-icon name="add"></ion-icon></button>
<ion-label primary>{{q.variableName}}</ion-label>
</ion-item>
This successfully brings up the modal into view
@Component({
templateUrl: 'build/pages/add-kids/add-kids.html'
})
export class AddKidsModal {
static get parameters(){
return [[NavController],[ViewController],[NavParams]];
};
constructor(private nav: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
public viewCtrl: ViewController,
public modal: Modal) {
this.viewCtrl = viewCtrl
};
close(){
this.viewCtrl.dismiss();
};
}
When I hit the back button
<ion-header>
<ion-navbar>
<ion-title>Add Kids</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-header-bar>This is the add kids page</ion-header-bar>
<ion-item>
<ion-label primary>This is a label</ion-label>
<ion-input type="text" > </ion-input>
</ion-item>
<ion-item>
<ion-label primary>This is a label</ion-label>
<ion-input type="text"> </ion-input>
</ion-item>
<button light (click)="close()">
<ion-icon name='arrow-back'></ion-icon>
Back
</button>
</ion-list>
I get the error TypeError: Cannot read property 'dismiss' of undefined.
Now i believe the problem lies in the fact that I do not have
static get parameters() {
return [[NavController]];
}
in my ‘main’ page or in other words the page the modal comes out of. When I do add it, the app breaks.
@Component({
templateUrl: 'build/pages/leads/leads.html',
providers: [JsonData, AddKidsModal],
directives: [CORE_DIRECTIVES]
})
export class LeadsPage {
//This breaks the app!
static get parameters() {
return [[NavController]];
}
leadsForm: ControlGroup;
//Any Idea ho to get this to be more concise?
"1": AbstractControl;
"2": AbstractControl;
"3": AbstractControl;
"4": AbstractControl;
"5": AbstractControl;
"6": AbstractControl;
"7": AbstractControl;
"8": AbstractControl;
submitAttempt: Boolean = false;
public questions: AbstractControl;
constructor(private navCtrl: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
private http: Http,
public jsondata: JsonData,
public addKidsModal: AddKidsModal
) {
this.leadsForm = formBuilder.group({
"1": [""],
"2": [""],
"3": [""],
"4": [""],
"5": [""],
"6": [""],
"7": [""],
"8": [""]
});
this.loadQuestions();
this.navCtrl = navCtrl;
}
loadQuestions(){
this.jsondata.load()
.then(data => {
this.questions = (data);
})
};
submit(){
this.submitAttempt = true;
console.log("Success!");
var data = this.leadsForm.value;
this.jsonMaker(data);
};
jsonMaker(data){
console.log(JSON.stringify(data)), error => {
console.log("oooops!");
}
};
gotoAddKidsModal() {
let modal = Modal.create(AddKidsModal);
this.navCtrl.present(modal);
};
I get this error when it is added.
TypeError: Cannot read property 'group' of undefined
The group refers to the FormBuilder.group method. But how do I circumvent that, since that is what is generating my FormControls?
I did not include any import statements for simplicity sake, if you would like them I can add them in.
How do I pass the params from the ‘main’ page form to the modal, so that way I can go back?
Thanks!
Cordova CLI: 6.3.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.36 Ionic App Lib Version: 2.0.0-beta.19 ios-deploy version: Not installed ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v4.4.7 Xcode version: Not installed