Angular6 - FormControlName - TypeError : Cannot read property 'get' of undefined

Question

我的项目中有 loginForm Stackblitz

但我在“formControlName”处收到错误:

ERROR TypeError: Cannot read property 'get' of undefined at Object.eval [as updateDirectives] (LoginComponent.html:7) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910) at checkAndUpdateView (core.js:23306) at callViewAction (core.js:23547) at execComponentViewsAction (core.js:23489) at checkAndUpdateView (core.js:23312) at callViewAction (core.js:23547) at execEmbeddedViewsAction (core.js:23510) at checkAndUpdateView (core.js:23307) at callViewAction (core.js:23547)

我的登录组件:

  initForm() {
    this.loginForm = this.fb.group({
    email: ['', Validators.required ],
    password: ['', Validators.required]     
   });
    }

我不明白错误出现在哪里。

我的输入字段组件Stackblitz

 value:string;
 onChange: ()=> void;
 onTouched: ()=> void;
 disabled:boolean;
  ngOnInit() {
   }
  writeValue(value: string): void {
  this.value = value ? value: '';  
   }
  registerOnChange(fn: any): void {
   this.onChange =fn;
   }
   registerOnTouched(fn: any): void {
   this.onTouched=fn;
   }
   setDisabledState?(isDisabled: boolean): void {
   this.disabled = isDisabled;
   } 

我错过了什么？

Answer 1

您可以编写一个小函数以更简洁的方式返回控件，这样在您的 html 中您就可以拥有下面给出的示例。该错误与您尝试访问控件的方式有关。

<div class="alert alert-danger" *ngIf="email.dirty">

然后返回控制权，以便您拥有适当的访问权限。看起来像这样。

import { AbstractControl } from '@angular/forms'; //correct type to return.


public get email(): AbstractControl
{
    return this.loginForm.controls.email
}

这将允许您访问相应表单组的控件。您可以为每个要访问的控件编写一个。您也可以返回表单，然后只访问您想要的控件。上面的代码阻止了 stackblitz 中的错误，并在屏幕上的 JSON 中显示了结果。如果您有任何问题，请发表评论。

这样做的一个好处是，在您的 Controller 和模板中，您可以使用它来执行快速检查。

if (this.email.valid)
{
    // any logic where you require a specific form control to be valid.
}

Documentation for Angular Forms .