如何在错误列表中附加错误角度模板表单

Question

如何在Angular模板表单中使用验证器。我在Angular中创建了电子邮件组件。

export class EcEmailComponent implements OnInit, Validator {
validate(control: AbstractControl): { [key: string]: any } | null {
if (!this.required) {
return null;
}
const value = this.value;
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(value)) {
return null;
}
else {
return { invalidEmail: true }
}
}
}

它的HTML文件

<div class="row">
<div class="col">
<input type="email"
#txtBoxEmail="ngModel"
[(ngModel)]="value"
[required]="required">
<div *ngIf="txtBoxEmail.errors">
<div class="row alert alert-danger alert-div">
<div *ngIf="txtBoxEmail.errors?.['invalidEmail']">
<span>
Please enter valid email
</span>
</div>
</div>
</div>
</div>
</div>

我无法显示Please enter valid email。如何将invalidEmail错误附加到错误数组？

Answer 1

角反应形式内置了这样的验证器。您可以轻松地创建自定义验证器。

电子邮件验证器是内置的反应形式。这是最适合您的用例。

请参阅此处的工作示例