Как разрешить объект »не содержит такого члена Angular 7 и VS Ошибка кода

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, сообщение проверки поля электронной почты отображается, как только я набираю один символ в поле ввода.

Однако, когда я смотрю на свой код Typescript в VS.code, я получаю следующую ошибку:

Идентификатор 'email' не определен. '__object' не содержит такого члена. Angular

Я попытался исправить эту ошибку, внеся следующие изменения:

{{formErrors['email']}}

• Теперь ошибка кода VS исчезла
• Но сообщение проверки не отображается при вводе одного символа.
• Вместо этого сообщение проверки отображается только после того, как я покину поле.

Может кто-нибудь сказать мне, почему это происходит и как я могу решить это? Большое спасибо заранее

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когда элемент управления имеет ошибку