获取错误无法在[null]中读取未定义的属性'validator'，在评估“click”时也出错

时间：2017-01-12 05:41:27

标签： javascript html angular angular2-forms angular2-services

我正在使用下面的代码，但收到错误..我无法找到我错在哪里：

  

TypeError：无法读取未定义的属性'validator'       [空]

当我点击“创建”按钮获得以下错误

时

enter image description here

Testing.component.ts 

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig}                 from 'angular2/router';

//---------Import External Components---------

    import {TestingMain}                                    from './Testing.main';

    @Component({
        selector: 'testing',
        templateUrl: `app/Testing/Testing.view.html`
    })
    @RouteConfig([
            { path: '/', name: 'ManageTesting', component: TestingMain, useAsDefault: true },
    ])
    export class Testing {
        constructor() {
        }
    }

Testing.main.ts 

 //---------Import Angular2------------
    import {Component, OnInit}                                     from 'angular2/core';
    import {HTTP_PROVIDERS, Http}                                  from 'angular2/http';
    import {ROUTER_DIRECTIVES, RouteConfig}                        from 'angular2/router';
    import {FORM_DIRECTIVES,
        FormBuilder, Control, ControlGroup, Validators}            from 'angular2/common';

    //---------Import External Components---------
    import {Testingmodel}               from './Testing.model';
    import {TestingService}             from './Testing.service';
    //---------Declare Components---------
    @Component({
        selector: 'Testing-list',
        templateUrl: `app/Testing/Testing.view.html`,
        directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
        providers: [TestingService, HTTP_PROVIDERS]
    })

    //---------Export This Component Class---------
    export class TestingMain implements OnInit {

        public resmessage: string;
        public addmessage: string;
        public listmessage: string;
        public contact: Testingmodel;
        public editContactId: any

        testingForm: ControlGroup;
        firstName: Control;
        //Constructor
        constructor(private builder: FormBuilder,
            private testingService: TestingService) {
            this._formGroup();
        }

        ngOnInit() {
            this.resmessage = "";
        }
        //Form Group
        _formGroup() {
            //Set Initial Values to the Control & Validators
            this.firstName = new Control('', Validators.required);
            this.testingForm = this.builder.group({
                firstName: this.firstName
            });
        }
        saveContact(Testing) {
            this.testingService.saveTesting(Testing)
                .subscribe(response => {
                    this.resmessage = response;
                });
        }
    }

Testing.service.ts 

import {Injectable, Component}                            from 'angular2/core';
import {Http, Request, RequestMethod, Response,
    RequestOptions, Headers}                              from 'angular2/http';
import 'rxjs/Rx';
import {Observable}                                       from 'rxjs/Observable';
import {Testingmodel}                                     from './Testing.model';

@Component({
    providers: [Http]
})

@Injectable()
export class TestingService {
    public headers: Headers;

    constructor(private _http: Http) {
    }

    public _saveUrl: string = 'api/Testing/PostTesting';

    saveTesting(testing: Testingmodel): Observable<string> {
        //debugger
        let body = JSON.stringify(testing);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        //http.post(url: string, body: string, options ?: RequestOptionsArgs): Observable<Response>
        return this._http.post(this._saveUrl, body, options)
            .map(res => res.json().message)
            .catch(this.handleError);
    }
    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Opps!! Server error');
    }
}

Testing.view.html 

<div class="row">

    <div class="col-sm-4">

        <form [ngFormModel]="testingForm">
            <div class="form-group" [ngClass]="{ 'has-error' : !firstName.valid }">
                <label class="control-label" for="firstName">Username</label>
                <em *ngIf="!firstName.valid">*</em>
                <input id="firstName" type="text"
                       class="form-control"
                       placeholder="FirstName" [ngFormControl]="firstName">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary" (click)="saveTesting(testingForm.value)">
                    Create
                </button>

            </div>
        </form>

    </div>

</div>

Package.jason 

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-shim": "^0.33.3",
    "rxjs": "5.0.0-beta.2"
  },
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "rimraf": "2.2.8"
  }
}

1 个答案:

答案 0 :(得分：2)

我试图抓住你的testing.main.ts文件。自从我使用测试版以来已经很久了，所以努力记住。

但是：如果testing.view是＆＃34;已连接＆＃34;到testing.main - html，它当然会产生错误，因为你同时在testing.component和templateUrl: `app/Testing/Testing.view.html` 引用了相同的html视图：

testing.main.ts

你已经正确地连接了＃34;查看正确的ts文件，即templateUrl: `app/Testing/Testing.view.html` - 文件。但是你现在有两个组件引用相同的html视图。删除行

app/Testing/Testing.view.html
来自您的testing.component的

。

说实话，我不明白test.component的用途，但至少当我从应用程序中删除该文件时它工作正常。这是一个工作的plunker来证明这一点！ Plunker

EDIT2：嗯，我继续修改了plunker，所以这里是正确的testing.component。如前所述，您需要从testing.component中删除templateUrl：<router-outlet>，因为它不起作用。相反，如果您想使用@Component({ selector: 'testing', template: ` <router-outlet></router-outlet>`, directives: [ROUTER_DIRECTIVES, TestingMain] }) @RouteConfig([ { path: '', name: 'TestingMain', component: TestingMain, useAsDefault: true } ]) export class AppComponent { } ，则需要将其放在那里：

所以这样：

java.lang.RuntimeException: org.springframework.beans.factory.access.BootstrapException: Error executing bootstraps; nested exception is java.lang.NullPointerException
        at org.wildfly.extension.undertow.deployment.UndertowDeploymentService$1.run(UndertowDeploymentService.java:85)
        at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        at java.lang.Thread.run(Thread.java:745)
        at org.jboss.threads.JBossThread.run(JBossThread.java:320)
Caused by: java.lang.RuntimeException: org.springframework.beans.factory.access.BootstrapException: Error executing bootstraps; nested exception is java.lang.NullPointerException
        at io.undertow.servlet.core.DeploymentManagerImpl.deploy(DeploymentManagerImpl.java:236)
        at org.wildfly.extension.undertow.deployment.UndertowDeploymentService.startContext(UndertowDeploymentService.java:100)
        at org.wildfly.extension.undertow.deployment.UndertowDeploymentService$1.run(UndertowDeploymentService.java:82)
        ... 6 more
Caused by: org.springframework.beans.factory.access.BootstrapException: Error executing bootstraps; nested exception is java.lang.NullPointerException
        at org.codehaus.groovy.grails.web.context.GrailsContextLoader.initWebApplicationContext(GrailsContextLoader.java:132)
        at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:112)
        at io.undertow.servlet.core.ApplicationListeners.contextInitialized(ApplicationListeners.java:187)
        at io.undertow.servlet.core.DeploymentManagerImpl$1.call(DeploymentManagerImpl.java:200)
        at io.undertow.servlet.core.DeploymentManagerImpl$1.call(DeploymentManagerImpl.java:171)
        at io.undertow.servlet.core.ServletRequestContextThreadSetupAction$1.call(ServletRequestContextThreadSetupAction.java:42)
        at io.undertow.servlet.core.ContextClassLoaderSetupAction$1.call(ContextClassLoaderSetupAction.java:43)
        at io.undertow.servlet.api.LegacyThreadSetupActionWrapper$1.call(LegacyThreadSetupActionWrapper.java:44)
        at io.undertow.servlet.api.LegacyThreadSetupActionWrapper$1.call(LegacyThreadSetupActionWrapper.java:44)
        at io.undertow.servlet.api.LegacyThreadSetupActionWrapper$1.call(LegacyThreadSetupActionWrapper.java:44)
        at io.undertow.servlet.api.LegacyThreadSetupActionWrapper$1.call(LegacyThreadSetupActionWrapper.java:44)
        at io.undertow.servlet.api.LegacyThreadSetupActionWrapper$1.call(LegacyThreadSetupActionWrapper.java:44)
        at io.undertow.servlet.core.DeploymentManagerImpl.deploy(DeploymentManagerImpl.java:234)
        ... 8 more
Caused by: java.lang.NullPointerException
        at BootStrap$_closure1.doCall(BootStrap.groovy:24)
        at grails.util.Environment.evaluateEnvironmentSpecificBlock(Environment.java:308)
        at grails.util.Environment.executeForEnvironment(Environment.java:301)
        at grails.util.Environment.executeForCurrentEnvironment(Environment.java:277)
        ... 19 more

这是一个更新的Plunker

相关问题
最新问题