Угловые фишки материала для отображения под полем ввода

Question

Я использую Angular Material для создания фишек, введенных в поле ввода. Таким образом, текущее поведение по умолчанию, приведенное в документации examples , заключается в отображении фишек внутри поля ввода. Я не хочу показывать эти микросхемы внутри моего поля ввода. Я хочу, чтобы, когда пользователь что-то вводил, микросхема должна создаваться под полем ввода (а не внутри поля ввода). Вы можете просто помочь мне с любым примером ссылки.

Answer 1

Самый простой способ реализовать это игра со свойством CSS position.

Но на самом деле лучше использовать flexbox: https://codepen.io/avreddy/pen/ppzraz

.md-chips { 
  display: flex;
  flex-wrap: wrap;
} 
.md-chips md-chip{
  order: 2;
}
.md-chips .md-chip-input-container {
  order: 1;
  width: 100%;
}

Answer 2

Я использовал компонент ввода, который будет принимать входные данные, а затем добавлять их в любой массив. Затем я передал этот массив компоненту чипов, который будет отображать чипы.

Шаблон, который вызывает keyDown и blur для добавления фишек к этим двум событиям. Вызывается другой компонент, который отображает чипы, проходящие через массив чипов.

<form [formGroup]="form">
    <mat-form-field appearance="outline">
        <mat-label>Key Skills</mat-label>
        <input matInput placeholder="Skills" (keydown)="onAddSkills($event)" (blur)="onBlurMethod()" formControlName="keySkills" name="keySkills">
    </mat-form-field>
    <div class="chip-list">
        <chip-list [skills]="skills"></chip-list>
    </div>
</form>

Компонент для этого шаблона

import {Component} from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

export interface Skills {
  name: string;
}

@Component({
  selector: 'key-skills',
  templateUrl: 'key-skills.component.html',
  styleUrls: ['key-skills.component.scss'],
})
export class KeySkillsComponent {
    skills: Skills[] = [];
    private form: FormGroup; 
    constructor(private fb: FormBuilder) { 
        this.form = this.fb.group({
            "keySkills": new FormControl()
    });
    }

  onAddSkills(event) {
    if (event.key === "Enter" || event.key===",") {
        this.addSkillsToArray(this.form.value['keySkills']);
    }
  }

  onBlurMethod() {
            this.addSkillsToArray(this.form.value['keySkills'])
  }

  addSkillsToArray(skill) {
    if ((skill || '').trim()) {
        this.skills.push({name: skill.trim()});
            }
        this.form.reset();
    event.preventDefault();
  }
}

Шаблон списка чипов

<mat-chip-list>
    <mat-chip *ngFor="let skill of skills">
        {{skill.name}}
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

и Компонент

import {Component, Input} from '@angular/core';

@Component({
  selector: 'chip-list',
  templateUrl: 'chip-list.component.html',
  styleUrls: ['chip-list.component.scss'],
})
export class ChipListComponent {
    @Input() skills;
}

Легко, peasy. Результаты всего этого:

Answer 3

Если вы посмотрите на пример Angular Material Chip , вы можете извлечь вход из mat-form-field

Обновление: Если вы переупорядочиваете элемент ввода в примере из документов , то чипы появляются ниже ввода (где пользователь вводит текст), но все еще являются частью компонента:

<mat-form-field class="example-chip-list">
  <input placeholder="New fruit..."
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)">

  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
            [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

Это может не дать вам именно то, что вы предполагали, но я думаю, что это соответствует духу решения, которое вы ищете.

Смотрите это StackBlitz Я подправил пример.