Angular 角度形式：输入内部显示多个标签

我正在使用Angular CLI、Angular材质表单和输入。我开发了一个表单，在里面添加了一个新的标签

我被困在如何显示已经添加到输入中的每个标签上

这是我的密码：

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>

这就是我想要实现的输出UI

---

只需将表单控件的值设置为您希望它显示的值即可

onClick() {
   this.tasks.push({name: this.task, strike: false});
   this.task = '';
   this.createItemForm.get('hashtag').setValue(this.tasks.map(t => '#' + t).join(', '))
}

---

通过在表单控件中添加“#”，推送新的hashtags值

onClick() {
   this.tasks.push({'name': '#'+this.task, 'strike': false});
   this.task = '';
   this.createItemForm.controls.hashtag.setValue(this.tasks.reduce((a: string, t: any) => a.concat(t.name + ', '), ""));
}

---

很抱歉回复太晚，感谢您的解决方案，它的工作非常好。感谢您的解决方案，很高兴知道使用相同的方法setValue实现此要求的另一种方法

onClick() {
   this.tasks.push({'name': '#'+this.task, 'strike': false});
   this.task = '';
   this.createItemForm.controls.hashtag.setValue(this.tasks.reduce((a: string, t: any) => a.concat(t.name + ', '), ""));
}