कोणीय 2: अपरिभाषित

Question

की संपत्ति 'सत्यापनकर्ता' नहीं पढ़ सकता ठीक है, इसलिए यह आधिकारिक तौर पर मुझे पागल कर रहा है।

मेरे पास इस समय मेरे कोणीय 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 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)); 
} 

स्टैक ट्रेस को देखते हुए, ऐसा लगता है रूप नहीं है तत्काल होना इस कोणीय समारोह में त्रुटि फेंक दी गई है:

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' शून्य है।

क्या कोई इस पर प्रकाश डाल सकता है? मैंने एंगुलर 2 के अपने ज्ञान को हल करने के लिए एक समाधान की तलाश की है!

धन्यवाद।

Answer 1

क्या आप SigninComponent घटक में ऑब्जेक्ट के भीतर तत्काल हैं, क्योंकि आप ngFormModel निर्देश का लाभ उठाते हैं। ऐसा ही कुछ (उदाहरण के लिए):

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

आशा है कि यह आप में मदद करता है, थियरी