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

Question

我在 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>


    

Answer 1

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

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

1. 使用FormControl示例了解反应式表单的基础知识。
2. 了解如何设置包含多个/不同FormControl的FormGroup 。
3. 了解如何设置包含FormArray的FormGroup ，其中包含多个/类似的FormControl s。

一旦您理解了上述内容，为电子邮件设置验证就非常简单了。 当您为每封电子邮件定义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