3

I am following the form examples provided at Forms in Angular 2 and when I load the page I get this error

TypeError: Error loading "angualr2/forms" at <unknown> Error loading
"angualr2/forms" from "app" at http://localhost:8080/js/app.es6 Cannot
read property 'replace' of undefined

Here is the code. This is for the first data driven forms example from the blog

index.html

<my-form></my-form>

<script>
    System.paths = {
        'angular2/*' : '/quickstart/angular2/*.js',
        'rtts_assert/*' : '/quickstart/rtts_assert/*.js',
        'app' : 'js/app.es6'
    };

    //start app
    System.import('app');
</script>

app.es6

class Address {
street: string;
city: string;
state: string;
zip: string;
residential: boolean;
}

@Component({
    selector: 'my-form'
})
@Template({
    inline: '<form [form-structure]="form"></form>',
    directives: [forms] 
})
class FormExample {
    constructor(fb: FormBuilder) {
        this.address = new Address();

        this.form = fb.fromModel(address, 
            [
             {field: 'street', label: 'Street', validator: 'required'},
             {field: 'city', label: 'City', validator: 'required'},
             {field: 'state', label: 'State', size: 2, validator: 'required'},
             {field: 'zip', label: 'Zip Code', size: 5, validator: 'required'},
             {field: 'residential', label: 'Residential', type: 'checkbox'}
             ], {
            saveOnUpdate: true,
            layoutStrategy: materialDesign
    });
}
}

bootstrap(FormExample);

Any help would be appreciated

Deepzz
  • 4,573
  • 1
  • 28
  • 52
adeelmahmood
  • 2,371
  • 8
  • 36
  • 59

1 Answers1

1

did you post all of your app.es6? Imports seem to be missing.

And: the error suggests there may be a typo in the import? angualr2/forms --> in my example the folder name is angular2/forms

ThatsWhy
  • 26
  • 2
  • Yeah that was it. Darn typo. Now I am getting a different error though .. > ror during instantiation of Token(AppView)!. ORIGINAL ERROR: TypeError: Cannot read property 'annotations' of undefined – adeelmahmood Mar 27 '15 at 22:17
  • the forms seem to be not ready yet: http://stackoverflow.com/questions/29215464/importing-anuglar2-forms-causing-cannot-read-property-annotations-of-undefine – user656449 Mar 30 '15 at 07:04