Angular 4：在ngOnInit（）方法下，無法獲取表單元素的值。 「獲得」未定義的錯誤來了

Question

說明：

角4，被動的做法，試圖通過創建一個驗證功能，通過該功能ngOnInit（）方法下的字段值進行比較。

請在下面找到我的代碼，

import { Component, OnInit } from '@angular/core'; 
import {BsModalRef} from "ngx-bootstrap"; 
import {FormGroup, FormControl, Validators} from "@angular/forms"; 

@Component({ 
    selector: 'app-formcontent', 
    templateUrl: './formcontent.component.html', 
    styleUrls: ['./formcontent.component.css'] 
}) 

export class FormcontentComponent implements OnInit { 

    signupForm: FormGroup; 
    constructor(public bsModalRef: BsModalRef) { } 

ngOnInit() { 
    this.signupForm = new FormGroup({ 
     'firstname': new FormControl(null, Validators.required), 
     'lastname': new FormControl(null, Validators.required), 
     'email': new FormControl(null, [Validators.required, Validators.email]), 
     'password': new FormControl(null, Validators.required), 
     'cnfpwd': new FormControl(null, [Validators.required, this.checkPassword.bind(this)]), 
    'checkb': new FormControl('checked', Validators.required) 
    }); 
    } 

checkPassword(control: FormControl): {[s: string]: boolean} { 
    if(control.value === this.signupForm.get('password').value){ 
     return {'isConfirmPasswordValid': true} 
    } 
    return null; 
    } 

    onSubmit(){ 
    console.log(this.signupForm.value.firstname); 
    console.log(this.signupForm.valid); 
    } 

} 

在上面的代碼中，我創建了「checkPassword」校驗功能來比較的密碼值的控制值。當我在ngOnInit（）方法下將此函數作爲驗證函數的一部分傳遞給字段'cnfpwd'時，在運行時，我得到了下面這個錯誤。

FormcontentComponent_Host.html:1 ERROR TypeError: Cannot read property 'get' of undefined 
    at FormcontentComponent.webpackJsonp.../../../../../src/app/formcontent/formcontent.component.ts.FormcontentComponent.checkPassword (formcontent.component.ts:28) 
    at forms.es5.js:443 
    at Array.map (<anonymous>) 
    at _executeValidators (forms.es5.js:443) 
    at FormControl.validator (forms.es5.js:399) 
    at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._runValidator (forms.es5.js:2645) 
    at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.updateValueAndValidity (forms.es5.js:2613) 
    at new FormControl (forms.es5.js:2936) 
    at FormcontentComponent.webpackJsonp.../../../../../src/app/formcontent/formcontent.component.ts.FormcontentComponent.ngOnInit (formcontent.component.ts:22) 
    at checkAndUpdateDirectiveInline (core.es5.js:10836) 
View_FormcontentComponent_Host_0 @ FormcontentComponent_Host.html:1 
proxyClass @ compiler.es5.js:14971 
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398 
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 
(anonymous) @ core.es5.js:9216 
(anonymous) @ platform-browser.es5.js:2651 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424 
onInvokeTask @ core.es5.js:3881 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 
invokeTask @ zone.js:1370 
globalZoneAwareCallback @ zone.js:1388 
FormcontentComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}} 
View_FormcontentComponent_Host_0 @ FormcontentComponent_Host.html:1 
proxyClass @ compiler.es5.js:14971 
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398 
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085 
(anonymous) @ core.es5.js:9216 
(anonymous) @ platform-browser.es5.js:2651 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424 
onInvokeTask @ core.es5.js:3881 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 
invokeTask @ zone.js:1370 
globalZoneAwareCallback @ zone.js:1388 
FormcontentComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in. 

     Example: 


    <div [formGroup]="myGroup"> 
     <input formControlName="firstName"> 
    </div> 

    In your class: 

    this.myGroup = new FormGroup({ 
     firstName: new FormControl() 
    }); 
    at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.ReactiveErrors.missingFormException (forms.es5.js:4437) 
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective._checkFormPresent (forms.es5.js:4858) 
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.ngOnChanges (forms.es5.js:4688) 
    at checkAndUpdateDirectiveInline (core.es5.js:10833) 
    at checkAndUpdateNodeInline (core.es5.js:12332) 
    at checkAndUpdateNode (core.es5.js:12271) 
    at debugCheckAndUpdateNode (core.es5.js:13132) 
    at debugCheckDirectivesFn (core.es5.js:13073) 
    at Object.eval [as updateDirectives] (FormcontentComponent.html:2) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) 
View_FormcontentComponent_0 @ FormcontentComponent.html:2 
proxyClass @ compiler.es5.js:14971 
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398 
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 
(anonymous) @ core.es5.js:4814 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141 
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844 
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4814 
(anonymous) @ core.es5.js:4684 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 
onInvoke @ core.es5.js:3890 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141 
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821 
next @ core.es5.js:4684 
schedulerFn @ core.es5.js:3635 
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 
checkStable @ core.es5.js:3855 
onLeave @ core.es5.js:3934 
onInvokeTask @ core.es5.js:3884 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 
invokeTask @ zone.js:1370 
globalZoneAwareCallback @ zone.js:1388 
FormcontentComponent.html:2 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 4, nodeDef: {…}, elDef: {…}, elView: {…}} 

無法找到解決方案，請您指出我對任何解決方案嗎？謝謝。

Answer 1

您應該在組件構造函數中創建反應形式而不是ngOnInit。 https://angular.io/guide/reactive-forms#introduction-to-formbuilder

Answer 2

安德烈是對的。在實例化之前，您正在檢查FormGroup。要修復您的錯誤，請在執行工作之前更改checkPassword函數和其他任何驗證程序以檢查FormGroup是否存在。

checkPassword(control: FormControl): {[s: string]: boolean} { 
    if (!this.signupForm) { 
    return null; 
    } 

    if(control.value === this.signupForm.get('password').value){ 
    return {'isConfirmPasswordValid': true} 
    } 
    return null; 
}