我的项目中有 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;
}
我错过了什么?
最佳答案
您可以编写一个小函数以更简洁的方式返回控件,这样在您的 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.
}
关于Angular6 - FormControlName - TypeError : Cannot read property 'get' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55198866/