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，

标签：控件,void,list,NG,new,表单,chips,Angular
来源： https://www.cnblogs.com/starof/p/14458052.html