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

查看堆栈跟踪，似乎没有实例化表单。在这个 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();
};

其中“this.form”为空。

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

谢谢。

Answer 1

您是否在 SigninComponent 组件中实例化 signinForm 对象内的 ngFormModel 指令，因为您使用了 ngFormModel 指令。类似的东西（例如）：

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

希望对你有帮助 蒂埃里