Angular Form：输入内显示多个主题标签

Question

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

我不知道如何显示已添加到输入中的每个主题标签。

这是我的代码：

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 = '';
}

这是我想要实现的输出 UI

Answer 1

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

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

Answer 2

通过将“#”附加到表单控件来推送新的主题标签值

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 + ', '), ""));
}