html - 我如何允许电子邮件地址输入在 Angular 中接受多个电子邮件地址

Question

我正在使用 Angular 系统进行增强，我必须做的其中一项更改是允许电子邮件地址输入接受多个电子邮件地址。我在网上进行了深入挖掘以获得一些想法，但我似乎没有看到 Angular 想法。我只获得 Jquery 示例。

如何允许电子邮件地址输入接受多个电子邮件地址？

Example or similar thing I want

我做了什么:

HTML

   <div>
     <input name="contactEmail" placeholder="Contact Email" formControlName="contactEmail" 
     class="input- group input-group-md" type="text" [(ngModel)]="newCustomer.email" multiple>                  
  </div>

Component.ts

        public newCustomer: any = {     
        name: undefined,
        cont1: undefined,
        email: [],
        phone1: undefined,
        balance: 0.0
       };


      onCustomerSubmit() {
    
      if (!this.addCustomerForm.invalid) {
        //other code
        this.customerService.addCustomer(this.newCustomer, true, this.seller.name).then(data => {
            console.log("This is the data: " +data)
            if (data != null) {
                this.loadCusromers();
                this.onCustomerReset();
                this.messageService.add({ severity: 'success', summary: 'New Customer', detail: 
                'Customer is added successful.' });
                this.getCustomers();
            } else {
                if (data.faultcode === 'Server.Customer.duplicate_name') {
                    this.addAccountError = 'There is already exsisting custmer with the same name.';
                }                   
            }
            this.isAddingCustomer = false;
        
        }).catch(error => {
            this.isAddingCustomer = false;
            this.addAccountError = 'We are unable to process your request at this time. please try 
            again later.';
        });
        }
        }

Answer 1

您要找的是筹码。我建议你不要自己实现这个，你会遇到很多问题(不要问我怎么知道的)。

您可以使用现有的库，例如

• https://www.npmjs.com/package/ngx-chips
• https://material.angular.io/components/chips
• https://www.primefaces.org/primeng/showcase/#/chips