当我输入输入时显示离子芯片答案

【问题标题】：Show ion-chip when I type in input当我输入输入时显示离子芯片
【发布时间】：2020-11-30 01:45:18
【问题描述】：

希望你一切都好。

我的离子芯片和离子输入有问题。

当用户/某人在 ion-input 中键入电子邮件时，我试图在用户/某人按下 keyup.Space（空格）时将电子邮件显示为离子芯片。基本上，将电子邮件显示为离子芯片的触发器是当用户在键入电子邮件后按下 keyup.Space 时。

我现在拥有的：https://stackblitz.com/edit/angular-pdcrqr?file=src%2Fapp%2F

如果有人可以帮助我，我将不胜感激。

非常感谢

【问题讨论】：

看看这个github.com/Gbuomprisco/ngx-chips

标签： javascript angular ionic-framework input

【解决方案1】：

你可以这样做：

在您的 html 中：

<ion-item>
  <ion-chip *ngFor="let e of emails; let i = index;">
  <ion-label>{{e}}</ion-label>
  <ion-icon name="close-outline" (click)="removeItem(i)"></ion-icon>
</ion-chip>
<ion-input type="text" [(ngModel)]="userEmail" (keyup.Space)= "doSomething(userEmail)"></ion-input>
</ion-item>

.ts:

userEmail:any;
emails = [];

doSomething(email){
     if(this.doValidate(email)){
        this.emails.push(email);
        this.userEmail = '';  // reset ngModel it will clear old value
     }
}

removeItem(i){
     this.emails.splice(i, 1)
}



validateEmail(email) { //Validates the email address
    var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return emailRegex.test(email);
}

validatePhone(phone) { //Validates the phone number
    var phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; // Change this regex based on requirement
    return phoneRegex.test(phone);
}

doValidate(email) {
   if (!validateEmail(email) || !validatePhone(email) ){
    alert("Invalid Email");
    return false;
}

【讨论】：

嗨，它可以工作，但我如何定义芯片是电子邮件或电话号码？例如，如果我添加 gh@gmail.com，芯片将被添加，但我在输入中写入的任何内容并按空格也会被添加。怎么区分只有email格式或者电话格式才需要添加芯片的功能？
嗨，非常感谢您更新的答案，我可以看到它的工作原理，但它仍然是一个问题，如果您也能帮助我解决这个问题，我将不胜感激。当我输入输入的电子邮件或号码并按 SPACE 时，会出现芯片，但我输入的文本（电子邮件）在芯片之后仍然存在。例如，如果我写 d@gmail.com，芯片就会出现，但我仍然在芯片旁边收到电子邮件。如何重置该值以不出现在输入中的芯片之后？如果不清楚，我可以发送图像或其他内容。期待您的回答，非常感谢。
它的工作非常完美，谢谢你，非常感谢你的帮助和工作。我感觉很糟糕，但我还有 1 个问题，如果您无法提供帮助或没有时间，没关系，我只需要再执行 1 个步骤即可完成我的页面。现在芯片出现了，芯片后面的文字现在没有出现，但是当我输入电子邮件并且芯片出现在我的列表下方时，它就消失了。我已经连接到输入一个搜索与名称和检查属性绑定到离子复选框的对象数组。即使电子邮件芯片出现，我现在也需要显示我的原始对象数组。你知道怎么做吗？
检查ion-searchbar 的文档并提供建议。

【解决方案2】：

您可以使用其他替代品代替离子芯片。

您可以使用材料组件使其工作。请参考以下代码以获取上下文。

 <mat-chip-list #embeddedList class='tags-chip-list'>
              <mat-chip class='tag' *ngFor="let tag of field;let index=index;" [selectable]="true"
                [removable]="true" (removed)="removeEmbeddedField(index)">
                {{tag}}
                <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
              <input placeholder="Embedded Fields" #embeddedInput [matChipInputFor]="embeddedList"
                [matChipInputSeparatorKeyCodes]="embeddedInput?.value ? [9, 13, 188] : []"
                [matChipInputAddOnBlur]="false" (matChipInputTokenEnd)="addEmbeddedField($event)">
            </mat-chip-list>

【讨论】：