角2：未定義のプロパティ 'バリデータ'を読み取ることができません

Question

これは正式に私を怒らせています。

私は現在、私のAngular 2アプリに、フォームを含む2つのコンポーネントを持っています。申し込みフォームはうまくいきましたが、私のサインフォームに問題があります。最近私はサインインコンポーネントのテンプレートとしてサインアップコンポーネントを使用していますが、問題を見つけようとしています。

私は、コンポーネントのクラスとコンポーネントのテンプレートの両方から最も必要なコードを除いてすべてを切り詰めました。私のコンポーネントのテンプレートは、現在、次のようになります。

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

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

私のコンポーネントのクラスは、次のようになります。

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

私は、フォームから[ngFormModel]を削除した場合、それはすべてのエラーをスローしません。私は属性を追加すると、私はこのおいしい結果を得る：完全を期すために

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

を、ここに私のWebPACKの設定です：

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

は、スタックトレースを見ると、形式ではないようですインスタンス化されています。

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

ここで 'this.form'はnullです。このエラーは、この角度関数でスローされます。

誰もがこれに光を当てることができますか？私は解決策を探して角2の私の知識を使い果たした！

ありがとうございました。

Answer 1

ngFormModelディレクティブを利用しているため、SigninComponentコンポーネントのsigninFormオブジェクト内でインスタンス化しますか？ （例えば）そのような何か：

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

は、私はもともとでしたが、それでもエラーが発生した ティエリ