Utilizing Angular CLI and Angular Material, I have created a form to input new hashtags.
I am facing difficulty in displaying previously added hashtags in the input field.
Below is the code I have written:
form.component.html
<form [formGroup]="createItemForm">
<fieldset>
<div class="row">
<div class="col-lg-6">
<mat-form-field>
<input formControlName="hashtag" matInput placeholder="Challenge hashtag"/>
<button matSuffix mat-button (click)="isShow = !isShow">Hashtag</button>
</mat-form-field>
<mat-form-field *ngIf="isShow">
<input matInput placeholder="Add a hashtag" [(ngModel)]="task" [ngModelOptions]="{standalone: true}"/>
<button matSuffix mat-button (click)="onClick()">Add</button>
</mat-form-field>
</div>
</div>
</fieldset>
<button mat-raised-button type="submit" (click)="createItems()" class="btn btn-primary pull-right"
[disabled]="!createItemForm.valid">Create a new items</button>
</form>
form.component.ts
task: string;
tasks = [];
isShow = false;
onClick() {
this.tasks.push({name: this.task, strike: false});
this.task = '';
}
and here's the visual UI output that I am striving for: https://i.stack.imgur.com/Fy2vv.png