Question

在我的Angular应用中，如果电子邮件输入字段无效，我试图显示一条错误消息。

这是我目前拥有的：

HTML：

<input [ngClass]="{'is-invalid': formErrors.email}" formControlName="email" type="text" class="form-control" id="email" placeholder="Email" (blur)="logValidationErrors()">
<div class="invalid-feedback">
    {{formErrors.email}}
</div>

打字稿：

validationMessages = {
    'email': {
        'required': 'Please provide your Email.',
        'emailDomain': 'Email domain should be gmail.com'
    }
};

formErrors = {};

logValidationErrors(group: FormGroup = this.signUpForm): void {
    Object.keys(group.controls).forEach((key: string) => {
    const abstractControl = group.get(key);

    this.formErrors[key] = '';
    if (abstractControl && abstractControl.invalid && (abstractControl.touched || abstractControl.dirty)) {
        const messages = this.validationMessages[key];

        for (const errorKey in abstractControl.errors) {
            if (errorKey) {
                this.formErrors[key] += messages[errorKey] + ' ';
            }
        }
    }

    if (abstractControl instanceof FormGroup) {
        this.logValidationErrors(abstractControl);
    }
    });
}

当我使用ng serve运行此代码时，只要在输入字段中键入单个字符，就会显示电子邮件字段验证消息。

但是，当我在VS.code中查看我的Typescript代码时，出现以下错误：

未定义标识符“电子邮件”。 '__object'不包含此类memberAngular

我已尝试通过进行以下更改来解决此错误：

{{formErrors['email']}}

现在，VS Code错误消失了
但是当我输入单个字符时，不会显示验证消息。
相反，只有当我离开该字段时才会显示验证消息。

有人可以告诉我为什么会这样以及如何解决吗？提前谢谢

Answer 1

您对它的想法太多了。

创建控件时：

this.form = builder.group({
  email: ['', [Validators.email]]
});

还

<input formControlName="email" type="text" class="form-control" id="email" placeholder="Email" (blur)="logValidationErrors()">
<div class="invalid-feedback" *ngIf="form.get('email').hasError('email')">
    {{validationMessages.email.emailDomain}}
</div>

您不需要添加自定义错误，因为当控件出现错误时，Angular会添加ng-invalid

如何解析对象'不包含此类成员Angular 7和VS Code错误

1 个答案: