Question

我正在使用材料设计来创建表单，在该表单中，我使用带有mat-chips和mat-autocomplete的输入字段，但是当我尝试使用form.reset（）重置表单时；它不起作用；

HTML

 <mat-form-field class="demo-chip-list">
  <mat-chip-list #chipList2>
  <mat-chip *ngFor="let state of selected"
   [selectable]="selectable"
   [removable]="removable"
   (remove)="remove(state)">
   {{state}}
   <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
  <input #input placeholder="Pick a state..."
   [matChipInputFor]="chipList2"
   [matChipInputAddOnBlur]="addOnBlur"
   (matChipInputTokenEnd)="add($event)"
   [matAutocomplete]="auto"
   [formControl]="stateCtrl"/>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="add($event); 
   input.value = ''">
   <mat-option *ngFor="let state of filteredStates | async" 
    [value]="state">
    {{ state }}
    </mat-option>
   </mat-autocomplete>
  </mat-chip-list>
  </mat-form-field>
 <button mat-button (click)="clear()">clear</button>

TS

  color =  'primary';
  selectable = true;
  removable = true;
  addOnBlur = true;
  @ViewChild('auto') auto: ElementRef; 
  states = [
  'Alabama', 'Alaska', 'Arizona', 'Arkansas'
  ];
  stateCtrl: FormControl;
  filteredStates: any;
  selected: string[] = [
  'Illinois', 'Missouri'
   ];

 constructor() {
  this.stateCtrl = new FormControl();
  this.filteredStates = this.stateCtrl.valueChanges.pipe(
    startWith(null),
  map((name: string) => this.filterStates(name))
  );
  }
 filterStates(val: string) {
 const matches = val ? this.states.filter(s => new RegExp(`^${val}`, 
 'gi').test(s))
  : this.states;
  return matches.filter(x => !this.selected.find(y => y === x));
 }

 add(event: MatAutocompleteSelectedEvent): void {
  if (!event.option) { return; }
 const input = event.source;
 const value = event.option.value;

  if ((value || '').trim()) {
   this.selected.push(value.trim());
  this.stateCtrl.setValue('');
  }
 } 
 remove(state: string): void {
 const index = this.selected.indexOf(state);

 if (index >= 0) {
  this.selected.splice(index, 1);
 }
 }
 clear(){
 this.stateCtrl.setValue('');
 }

即使我尝试使用form.controlName.setValue（''）进行重置，那就也行不通。

stackblitz链接：https://stackblitz.com/edit/angular-material2-issue-jn5dzm

Answer 1

在这里，您的formControl名称是：stateCtrl。

因此，您需要做的所有重置操作如下：

this.selected = []; // making the chipList empty
this.stateCtrl.reset(); // resets the control
this.stateCtrl.markAsPristine();
this.stateCtrl.markAsUntouched();

希望这能奏效，在我的情况下奏效。

Answer 2

这是一个已知问题。 setValue未通过mat-chip-list https://github.com/angular/components/issues/10968

触发

改为使用此方法 https://stackblitz.com/edit/angular-material2-issue-nfyw5u

Answer 3

我使用focus和blur属性作为解决方法。

HTML：

<input #chipsInput placeholder="Pick a state..."/>

TS：

...

chipsList: string[] = [];
@ViewChild('chipsInput') chipsInput: ElementRef<HTMLInputElement>;

constructor() { }        
clearAll(): void {
    this.chipsList = []; //clear chips list
    this.chipsInput.nativeElement.focus(); //WORKAROUND to update view
    this.chipsInput.nativeElement.blur(); //Removes focus from input
}   

...

无法使用垫块芯片和垫块自动完成功能重置表格-Angular Reactive表格

3 个答案: