验证输入电子邮件 Angular 8 的列表答案

【问题标题】：Validate a list of inputs email Angular 8验证输入电子邮件 Angular 8 的列表
【发布时间】：2021-09-27 13:34:06
【问题描述】：

我在 Angular 8 中有这段代码，它向我显示了一个输入列表，如附加的图像。

我遇到的问题是，当我单击“完成”按钮时，我必须验证电子邮件的语法，并且如果这是无效的，还要更改输入的颜色：

如果只是一个字段，我会使用 formGroup 来验证，但我不知道如何验证电子邮件字段列表。

请帮忙。

这是代码：

    // TS

this.admins = [{first_name: "", last_name: "", email: ""}]

public addAdmin(): void{
    this.admins.push({first_name: "", last_name: "", email: ""});
}

// HTML
<div class="row adminTableGetStarted" *ngFor="let ad of admins">
    <div class="colThree input">
        <input name="first-name-admin" type="text" placeholder="" 
        [(ngModel)]="ad.first_name" />
    </div>
    <div class="colThree input">
        <input name="last-name-admin" type="text" placeholder="" 
        [(ngModel)]="ad.last_name"  />
    </div>
    <div class="colThree input">
        <input name="email-admin" type="email" placeholder="" 
        [(ngModel)]="ad.email" 
        pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@\w+([\.-]?\w+)*(\.\w{2,6})+$" />
    </div>
</div>
<div class="addAdminPlus" (click)="addAdmin()">
+ Add Administrator
</div>

【问题讨论】：

标签： javascript arrays angular angular8 angular-reactive-forms

【解决方案1】：

虽然有一点学习曲线，但我相信 Angular 的 FormArray 将最适合您的情况。这个想法是您将设置一个新的FormArray，您可以在其中像普通数组一样推送数据，但它还包括一些内置验证。

我建议从基础到更复杂的学习以下内容：

使用FormControl 示例了解反应式表单的基础知识。
了解如何设置包含多个/不同FormControls 的FormGroup。
了解如何设置一个 FormGroup，其中包含一个 FormArray 持有多个/相似的 FormControls。

了解上述内容后，设置电子邮件验证非常简单。当您为每封电子邮件定义 FormControl 时，您可以添加 Angular 的内置验证。

new FormControl('', Validators.email)

参考资料：

反应式表单视频概述（包括 FormArray 示例）：https://youtu.be/JeeUY6WaXiA
反应形式：https://angular.io/guide/reactive-forms
反应式表单验证：https://angular.io/guide/form-validation#validating-input-in-reactive-forms

【讨论】：