角度2：无法读取未定义的属性“验证器”

Question

好吧，现在正式让我发疯。

我在我的Angular 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 [email protected]: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)); 
} 

看着堆栈跟踪，似乎形式不被实例化。在这个Angular函数中抛出错误：

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

where'this.form'is null。

任何人都可以阐明这一点吗？我已经用尽了Angular 2的知识寻找解决方案！

谢谢。

Answer 1

您是否利用ngFormModel指令实例化SigninComponent组件中的signinForm对象。类似的东西（例如）：

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

希望它可以帮助你， 蒂埃里