Module build failed on Form Builder injection (syntax error?)

Ionic Framework ionic-v3
1

Hi, I’m trying to add a form by adding FormBuilder and Validators to an Ionic 2 tab template.

I believe that I’ve followed angular2/ionic2 form setup. But I’m getting a syntax error even though I’ve copied and pasted the code from examples.

Note: I’m not using TypeScript. I created the project by typing this on the Terminal $ ionic start cutePuppyPics --v2

This is the error that I get on the Terminal after typing ionic build ios

image
Screen Shot 2016-03-09 at 3.28.17 PM.png885×550 75.2 KB

As you can see on the screenshot, the problem seems to be on the colon in fb: FormBuilder in the constructor

This is my page3.js

import {Page} from 'ionic-angular';
import {FormBuilder, Validators} from 'angular2/common';

@Page({
  templateUrl: 'build/pages/page3/page3.html'
})
export class Page3 {

    constructor(fb: FormBuilder) {
        // this.loginForm = fb.group({ // name should match [ngFormModel] in your html
       //      username: ["", Validators.required], // Setting fields as required
       //      password: ["", Validators.required]
       //      });
    }
}

My page3.html

<ion-navbar *navbar>
    <ion-title>
        Tab 3
    </ion-title>
</ion-navbar>

<ion-content class="page3">
<!-- <form [ngFormModel]="loginForm" (submit)="login($event)">
    <ion-input stacked-label>
         <ion-label>Username</ion-label>
         <input type="text" ngControl="username">
    </ion-input>

    <ion-input stacked-label>
        <ion-label>Password</ion-label>
        <input type="password" ngControl="password">
    </ion-input>

    <div padding>
        <button block type="submit" [disabled]="!loginForm.valid">Login</button>
    </div>
  </form> -->
</ion-content>

I’ve commented some blocks of code in my html and my js bec. I was debugging.

What is exactly wrong?

2

You have pasted TypeScript but are trying to treat it as JavaScript.

3

@rapropos Thanks for the clarification.

How would I use FormBuilder in just plain all JavaScript?

4

The first step would be being really really sure that you want to do that, because despite the learning curve of the language itself, I think you will find life in Angular 2-land much more pleasant when using TypeScript. The bit you get a syntax error on is a type declaration on the fb argument that gives the dependency injector enough information to know how to work its magic. Without it, you are going to have to decorate fb with @Inject(FormBuilder) as described in this article. I was going to try to point you in the direction of official Angular 2 DI docs for JavaScript, but it seems they do not exist yet, which brings us back to the rather strong suggestion of using TypeScript in the first place.

5 
export class Bbbbbbb {

    static get parameters() {
        return [[FormBuilder]];
    }

    constructor(fb) {

}
}
1 Like
6

Just to add to this, @ondonda’s code is how you would inject thing in pure ES6

7

I am having the same problem but I do not understand the @ondonda example.

Is the Class Bbbb the one linked to the html that handles the form?