Question

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

    <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

如何在输入字段中键入芯片

1 个答案: