angular - Angular 4: ngOnInit() メソッドの下で、フォーム要素の値を取得できません。「get」は未定義のエラーが発生しています

Question

説明：

Angular 4、Reactive Approach、バリデーター関数を作成し、その関数を 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: {…}}

解決策が見つかりません。解決策を教えてください。ありがとう。

score 0 · Accepted Answer

アンドレは正しい。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;
}

angular - Angular 4: ngOnInit() メソッドの下で、フォーム要素の値を取得できません。「get」は未定義のエラーが発生しています

2 に答える 2

Related

Reference