Angular 2: Nie można odczytać właściwości "validator" o niezdefiniowanym

Question

OK, więc to oficjalnie doprowadza mnie do szału.

Mam dwie części w mojej aplikacji Angular 2 w tej chwili, z których każda zawiera formularz. Formularz rejestracji działa poprawnie, ale mam problem z moją formą logowania. Ostatnio korzystałem z komponentu rejestracji jako szablonu dla komponentu logowania, aby spróbować znaleźć problem.

Usunąłem wszystkie niezbędne kody z klasy komponentu i szablonu komponentu. szablon mojego komponentu obecnie wygląda następująco: klasa

<link href="css/animation.css" rel="stylesheet"> 

<section id="signin_alt" class="authenty signin-alt"> 
    <form [ngFormModel]="signinForm" novalidate> 
    </form> 
</section> 

mojego komponentu wygląda następująco:

import { Component } from 'angular2/core'; 
import { ControlGroup, FormBuilder, AbstractControl, Validators } from 'angular2/common'; 
import { RouterOutlet, RouterLink, RouteConfig, Router, ROUTER_DIRECTIVES } from 'angular2/router'; 
import { AuthenticationService } from './services/authentication.service'; 
import { AppComponent } from '../app.component'; 

@Component({ 
    selector: 'signin', 
    directives: [RouterOutlet, RouterLink], 
    template: require('./signin.component.html') 
}) 
export class SigninComponent { 
    signinForm: ControlGroup; 
} 

Jeśli usunąć [ngFormModel] z formularza, nie rzucać żadnych błędów. Kiedy dodać atrybut, otrzymuję ten pyszny wynik:

EXCEPTION: TypeError: Cannot read property 'validator' of undefined in [signinForm in SigninComponent@3:14] 

Dla kompletności wywodu, tu jest mój WebPack config:

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice); 
var toString = Function.prototype.call.bind(Object.prototype.toString); 
var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    debug: true, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: 'src/public', 
     publicPath: '/__build__' 
    }, 
    entry: { 
     'app': './src/app/bootstrap', 
     'vendor': './src/app/vendor.ts' 
    }, 
    output: { 
     path: root('public/__build__'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
     chunkFilename: '[id].chunk.js' 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.html'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.json$/, loader: 'json' }, 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.png$/, loader: "url-loader?limit=100000" }, 
      { test: /\.jpg$/, loader: "file-loader" }, 
      { test: /\.html$/, loader: 'html' }, 
      { 
       test: /\.ts$/, 
       loader: 'ts', 
       exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
      }, 
      { 
       test: /\.(woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "url-loader?limit=10000&minetype=application/font-woff" 
      }, 
      { 
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "file-loader" 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), 
     new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) 
    ] 
}; 

function root(args) { 
    args = sliceArgs(arguments, 0); 
    return path.join.apply(path, [__dirname].concat(args)); 
} 

function rootNode(args) { 
    args = sliceArgs(arguments, 0); 
    return root.apply(path, ['node_modules'].concat(args)); 
} 

Patrząc na ślad stosu, wydaje się, że forma nie jest bycie tworzonym. Błąd jest zgłaszany w tej funkcji kątowej:

NgFormModel.prototype.ngOnChanges = function (changes) { 
    if (collection_1.StringMapWrapper.contains(changes, "form")) { 
     var sync = shared_1.composeValidators(this._validators); 
     this.form.validator = validators_1.Validators.compose([this.form.validator, sync]); 
     var async = shared_1.composeAsyncValidators(this._asyncValidators); 
     this.form.asyncValidator = validators_1.Validators.composeAsync([this.form.asyncValidator, async]); 
     this.form.updateValueAndValidity({ onlySelf: true, emitEvent: false }); 
    } 
    this._updateDomValue(); 
}; 

gdzie "this.form" ma wartość null.

Czy ktoś może rzucić na to światło? Skorzystałem z wiedzy Angular 2, szukając rozwiązania!

Dzięki.

Answer 1

Czy tworzysz instancję obiektu signinForm w komponencie SigninComponent, ponieważ korzystasz z dyrektywy ngFormModel. Coś w tym stylu (na przykład):

constructor(_builder:FormBuilder) { 
    this.signinForm = _builder.group({ 
     login: ['', Validators.required], 
     password: ['', Validators.required] 
}); 

Nadzieję, że to pomaga, Thierry