0

While following the tutorial for forms at https://angular.io/docs/ts/latest/guide/forms.html

I keep getting undefined errors whenever referring to any of the properties that are defined in the .ts file as long as I use templateUrl and a seperate .html

When I take the same html and place in the .ts file inside `` in template everything works fine.

So my question is: Does the templateURl file need to define scope somehow? The tutorial doesn't seem to cover anything about it and I assumed that it would get access to the component variables that called it.

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

import { Guitar } from './guitar';

@Component({
  selector: 'guitar-form',
//  template: `
//  <div class="container">
//    <h1>Guitar Form</h1>
//    <form>
//      <div class="form-group">
//        <label for="brand">Brand</label>
//        <select class="form-control" required
//                  [(ngModel)]="testmodel.brand" name="brand">
//          <option *ngFor="let b of brands" [value]="b">{{b}}</option>
//        </select>
//        TODO: remove this: {{testmodel.brand}}
//      </div>

//      <div class="form-group">
//        <label for="model">Model</label>
//        <input type="text" class="form-control" required
//           [(ngModel)]="testmodel.model" name="model">
//          TODO: remove this: {{testmodel.model}}
//      </div>

//      <div class="form-group">
//        <label for="color">Color</label>
//        <input type="text" class="form-control"
//                [(ngModel)]="testmodel.color" name="color">
//                  TODO: remove this: {{testmodel.color}}
//      </div>

//      <button type="submit" class="btn btn-default">Submit</button>
//    </form>
//  </div>
//  `
  templateUrl: 'app/guitar-form.component.html'
})
export class GuitarFormComponent {

  brands = ['Fender', 'Gibson', 'Guild', 'Jackson', 'Epiphone', 'Charvel'];

  testmodel = new Guitar(69, this.brands[0], 'Stratocaster', 'Black');

  submitted = false;

  onSubmit() { this.submitted = true; }

  // TODO: remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }
}

Funny, the undefined disappeared when I commented it out so I could demonstrate but ironically the diagnostic is no longer working when placed in the html and this was the one aspect that was working earlier. I have verified connectivity on an individual basis...

<div class="container">
  <h1>Guitar Form</h1>
  <form>
    {{ diagnostic }}
    <div class="form-group">
      <label for="brand">Brand</label>
      <select class="form-control" required
                [(ngModel)]="testmodel.brand" name="brand">
        <option *ngFor="let b of brands" [value]="b">{{b}}</option>

      </select>
              {{ testmodel.brand }}
    </div>

    <div class="form-group">
      <label for="model">Model</label>
      <input type="text" class="form-control" required
         [(ngModel)]="testmodel.model" name="model">
        TODO: remove this: {{testmodel.model}} -->
    </div>

    <div class="form-group">
      <label for="color">Color</label>
      <input type="text" class="form-control"
        [(ngModel)]="testmodel.color" name="color">
        {{ testmodel.color }}
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
Storeybox
  • 1
  • 1
  • 1

1 Answers1

0

I think you need to add

 moduleId: module.id,

to the @Component({...}) decorator.

See also Angular2 - What is the meanings of module.id in component?

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567