如何将输入字段键入为筹码

Question

我需要有关更改当前输入字段类型的编码方面的帮助。输入字段称为“类型”，用户在其中输入输入。我需要将当前输入字段的类型更改为“筹码”输入字段，用户将在其中输入输入，当按 Enter 时它将显示为筹码

    <div fxLayout="column" fxFlex="30" class="mr-8">
      <div class="mb-8" fxLayout="row" fxLayoutAlign="start start">
        <mat-form-field appearance="outline" fxFlex>
          <mat-label>Types</mat-label>
          <input name="type" formControlName="type" placeholder="Types" matInput>
        </mat-form-field>
      </div>

结果应该是当用户在字段中输入输入时，它会出来并显示为筹码

Answer 1

有一个技巧/黑客可以做。如果按下回车键，则隐藏并显示输入或芯片。我用 ngModel 做了一个例子，你可以把它改成响应式：

HTML

<mat-chip *ngIf="finished">
    {{myInput}}
</mat-chip>
<input placeholder="Type here the new chip" [(ngModel)]="myInput" matInput *ngIf="!finished" (keydown.enter)="finished=true">

Demo