输入时显示离子芯片

Question

我希望你身体健康。

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

当用户/某人在离子输入中键入电子邮件时，我试图在用户/某人按下键时将电子邮件显示为离子芯片。空间(Space(。基本上，将电子邮件显示为离子芯片的触发器是当用户按下键时。空格后，他键入了电子邮件。

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

如果有人能帮我，我将不胜感激。

非常感谢

Answer 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;
}

Answer 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>