Как ввести в поле ввода в виде фишек - PullRequest
Новая
       7

Как ввести в поле ввода в виде фишек

1 голос
/ 05 апреля 2019

Мне нужна помощь с кодированием при изменении текущего типа поля ввода. Поле ввода называется «типы», где пользователь вводит данные. Мне нужно изменить текущий тип поля ввода на поле ввода «Фишки», где пользователь будет вводить данные, и оно будет отображаться как Фишки при нажатии 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>

Результаты должны быть такими, когда пользователь вводит данные в поле, они отображаются и отображаются в виде фишек

1 Ответ

1 голос
/ 05 апреля 2019

Есть хитрость / хак.Скрыть и показать либо ввод, либо на основе чипа, если нажата клавиша ввода.Я сделал пример с 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">

Демо

...