Angular Material 输入框下方要显示的筹码

Question

我正在使用 Angular Material 创建在输入字段中输入的筹码。因此，文档 examples 中给出的当前默认行为是在输入框中显示筹码。我不想在我的输入字段中显示那些芯片我想做的是当用户输入任何内容时，应该在输入字段下（而不是在输入字段内）创建芯片。你可以帮我举个例子 link.

Answer 1

~~如果您查看 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 2

最简单的实现方法是玩 CSS 位置属性。

但实际上使用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 3

我使用了一个输入组件，它接受输入，然后将其添加到任何数组。然后我将这个数组传递给将显示筹码的筹码组件。

Template that calls keyDown and blur to add chips on these two events. Called another component that displays chips passing the array of chips.

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

The component for this template

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();
  }
}

Chip List template

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

and Component

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

Easy peasy. The results of all this is:

Angular Material 输入框下方要显示的筹码

Angular Material Chips to be displayed under the input box

angular-directive

angular-material

angular