Angular 2: Impossibile leggere la proprietà 'validatore' di indefinito

Question

Ok quindi questo mi sta facendo impazzire ufficialmente ora.

Al momento ho due componenti nella mia app Angular 2, ciascuno con un modulo. Il modulo di registrazione funziona correttamente, ma ho problemi con il mio modulo di accesso. Più di recente ho utilizzato il componente di registrazione come modello per il componente di accesso, solo per cercare di trovare il problema.

Ho tagliato tutto tranne il codice più necessario sia dalla classe del componente che dal modello del componente. modello del mio componente attualmente assomiglia a questo: class

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

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

La mia componente si presenta così:

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; 
} 

Se rimuovo il [ngFormModel] dalla forma, non gettare eventuali errori. Quando ho aggiungere l'attributo, ottengo questo delizioso risultato:

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

Per ragioni di completezza, ecco la mia 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)); 
} 

Guardando la traccia dello stack, sembra che la forma non è essere istanziato. L'errore è gettato in questa funzione angolare:

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(); 
}; 

dove 'this.form' è nullo.

Qualcuno può far luce su questo? Ho esaurito le mie conoscenze su Angular 2 in cerca di una soluzione!

Grazie.

Answer 1

Si crea un'istanza all'interno dell'oggetto signinForm nel componente SigninComponent poiché si fa leva sulla direttiva ngFormModel. Qualcosa del genere (per esempio):

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

Spero che ti aiuta, Thierry