Question

我的项目Stackblitz中有loginForm

但是我在“ formControlName”处收到错误：

错误TypeError：无法读取位于以下位置的未定义属性“ get” Object.eval [作为updateDirectives]（LoginComponent.html：7）位于 Object.debugUpdateDirectives [作为updateDirectives]（core.js：23910）位于在callViewAction（core.js：23547）处的checkAndUpdateView（core.js：23306）在execComponentViewsAction（core.js：23489）在checkAndUpdateView （core.js：23312）在callViewAction（core.js：23547）在在checkAndUpdateView处的execEmbeddedViewsAction（core.js：23510）（core.js：23307）在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
}

然后，您将可以访问相应表单组的控件。您可以为要访问的每个控件编写一个。还可以返回表单，然后仅访问所需的控件。上面的代码停止了堆叠错误，并在屏幕上的JSON中显示了结果。如有任何问题，请发表评论。

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

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

Documentation for Angular Forms。

Answer 2

引用您在stackblitz上的代码

这是您的表格

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

和HTML 您错过了表单名称

<div class="form-group">
        <app-input-field formControlName="email"></app-input-field>
        <div class="alert alert-danger" *ngIf="loginForm.get('email').dirty && personalProfileForm.get('email').hasError('required')">
          email Required
        </div>
        <app-input-field formControlName="password"></app-input-field>
        <div class="alert alert-danger" *ngIf="loginForm.get('password').dirty && personalProfileForm.get('password').hasError('required')">
          password Required
        </div>
      </div>

只需将html中的personalProfileForm替换为loginForm

此外，@ dince12的建议非常完美，以使您的html代码看起来更易于阅读，欢呼！

如果您需要有关该示例的更多详细信息，可以参考以下文章： http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example 下面是一个小例子：

创建这样的公共财产

public get myform() { return this.myform.controls; }

并像这样使用它

<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && myform.firstName.errors }" />
                            <div *ngIf="submitted && myform.firstName.errors" class="invalid-feedback">
                                <div *ngIf="myform.firstName.errors.required">First Name is required</div>
</div>

Angular6-FormControlName-TypeError：无法读取未定义的属性“ get”

2 个答案: