If you're searching for a solution similar to this, check out the plunker example here. Although there's room for enhancements and additional validations, the demo should meet your requirements.
The code is quite simple and focuses on these key sections:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
...
...
})
export class HomePage {
public myForm: FormGroup;
public tags: Array<string>;
constructor(public formBuilder: FormBuilder) {
this.tags = ['tag1', 'tag2', 'tag3'];
this.myForm = this.formBuilder.group({
tags: ['']
});
// Implementing async validation for username
this.myForm.get('tags')
.valueChanges
.subscribe((value: string) => {
if(value.indexOf(' ') > -1) {
let newTag = value.split(' ')[0];
console.log(newTag);
if(newTag) {
this.tags.push(newTag);
this.myForm.get('tags').setValue('');
}
}
});
}
public deleteTag(tagName: string) {
// Find tag index
let index = this.tags.indexOf(tagName);
// Remove tag from list
this.tags.splice(index, 1);
}
}
In the view section:
<ion-header>
<ion-navbar>
<ion-title>HomePage</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="myForm">
<ion-item>
<ion-input formControlName="tags" type="text"></ion-input>
</ion-item>
</form>
<div class="tag-container">
<span class="tag" *ngFor="let tag of tags">
{{ tag }}
<ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
</span>
</div>
</ion-content>
Lastly, don't forget about the CSS styling:
.tag-container {
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 10px;
margin: 10px;
}
.tag {
display: inline-block;
background-color: #5bc0de;
color: #fff;
margin: 5px 5px;
padding: 2px 5px;
}