如何在angular中只显示带有无效电子邮件的错误

Question

我想在用户输入无效电子邮件时显示错误。但失败。这是我的代码:每次我尝试在email元素上添加另一个检查时，我都会得到一个错误我有一种感觉，一些东西需要添加到配置文件但我不知道

<form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="card-content">
<span class="card-title">Welcome</span>
<div class="input-field">
<input formControlName="email" id="email" type="email" />
<label for="email">Email:</label>
<span class="helper-text red-text" *ngIf="form.get('email')?.invalid">
error
</span>
</div>
<div class="input-field">
<input formControlName="password" id="password" type="password" />
<label for="password">password:</label>
</div>
</div>
<div class="card-action">
<button
type="submit"
class="modal-action btn waves-effect"
[disabled]="form.invalid"
>
login
</button>
</div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss'],
})
export class LoginPageComponent implements OnInit {
form: FormGroup;

ngOnInit() {`enter code here`
this.form = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email]),
password: new FormControl(null, [
Validators.required,
Validators.minLength(6),
]),
});
}

onSubmit() {}
}

我能做什么?

Answer 1

我们应该使用下面的代码在HTML中进行email formcontrol错误检查

* ngIf ="form.controls['邮件']. error ?。Required || form.controls['email'].errors?.email">