驗證輸入電子郵件 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