Angular Material Chips将显示在输入框下方

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

如果你看看Angular Material Chip的例子，你可以从mat-form-field中输出输入

更新：如果您对example from the docs中的输入元素重新排序，则芯片将显示在输入下方（用户输入文本的位置），但仍然是组件的一部分：

<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。

Answer 3

我使用了一个输入组件，它将获取输入，然后将其添加到任何数组。然后我将这个数组传递给可以显示芯片的芯片组件。

调用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;
}

十分简单。所有这些的结果是：