Question

我正在使用Angular Material创建在输入字段中输入的芯片。因此，文档examples中给出的当前默认行为是在输入框中显示芯片。我不想向我的输入字段显示那些芯片，而我想做的是，当用户输入任何内容时，应该在输入字段下（而不是在输入字段内）创建芯片。您可以通过任何示例链接来帮助我。

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

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

调用keyDown并模糊处理以在这两个事件上添加筹码的模板。称为另一个显示通过芯片阵列的芯片的组件。

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

轻松自在。所有这些的结果是：

在输入框下方显示角材料碎片

3 个答案: