Angular自动建议表单控件

ng g c shared/chips-list

 用的chips控件。

 1,完成自动建议表单控件模板。

<div [formGroup]="form" class="full-width">
    <span>{{label}}</span>
    <mat-chip-list aria-label="Fish selection">
        <mat-chip selected="true" color="primary" *ngFor="let member of members"></mat-chip>
    </mat-chip-list>
    <mat-form-field *ngIf="displayInput" class="full-width">
        <input matInput type="text" [placeholder]="placeholderText" [matAutoComplete]="autoMembers"
            formControlName="membersearch" />
    </mat-form-field>
</div>

<!--自动完成-->
<mat-autocomplete #autoMembers="matAutocomplete" [displayWith]="displayUser">
    <mat-option *ngFor="let item of memberResults$ | async" [value]="item"
        (onSelectionChange)="handleMemberSelection(item)">
        {{item.name}}
    </mat-option>
</mat-autocomplete>

2,搭建一个自定义表达控件的架子出来。

import { FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Component, forwardRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-chips-list',
  templateUrl: './chips-list.component.html',
  styleUrls: ['./chips-list.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChipsListComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ChipsListComponent),
      multi: true
    }
  ]
})
export class ChipsListComponent implements OnInit, ControlValueAccessor {
  
  constructor() { }
  writeValue(obj: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnChange(fn: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnTouched(fn: any): void {
    throw new Error('Method not implemented.');
  }

  ngOnInit(): void {
  }

}

3,

 

如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下:


看到小伙伴打赏时给我写一些鼓励的话,真的非常感动,谢谢你们。


我开了个微信公众号(第三个二维码)用来分享自己的职场英语相关学习经验,感兴趣可以关注,我会不断更新~


微信打赏微信公众号

posted @ 2021-03-03 07:19  starof  阅读(52)  评论(0编辑  收藏  举报