3

我的项目Stackblitz中有 loginForm

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

错误类型错误：无法在 checkAndUpdateView (core.js:23306) 的 Object.debugUpdateDirectives [as updateDirectives] (core.js:23910) 的 Object.eval [as updateDirectives] (LoginComponent.html:7) 处读取未定义的属性“get”在 callViewAction (core.js:23547) 在 execComponentViewsAction (core.js:23489) 在 checkAndUpdateView (core.js:23312) 在 callViewAction (core.js:23547) 在 execEmbeddedViewsAction (core.js:23510) 在 checkAndUpdateView (core.js:23510) 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;
   }

我错过了什么？

4

2 回答 2

4

您可以编写一个小函数以更简洁的方式返回控件，因此在您的 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在屏幕上显示了结果。如果您有任何问题，请发表评论。

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

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

Angular 表单的文档。

于 2019-03-16T16:21:46.610 回答
3

在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>
于 2019-03-16T16:48:22.393 回答