无法使用垫子芯片和垫子自动完成重置表格 - Angular Reactive 表格答案

【问题标题】：Not able to reset the form with mat chips and mat auto-complete - Angular Reactive forms无法使用垫子芯片和垫子自动完成重置表格 - Angular Reactive 表格
【发布时间】：2019-09-19 04:03:48
【问题描述】：

我正在使用材料设计来创建一个表单，其中我使用带有 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>

  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

【问题讨论】：

标签： angular forms angular-material angular7 angular-reactive-forms

【解决方案1】：

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

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

【讨论】：

不，它不起作用。即使我想清除值以及从表单字段中删除所有筹码
你想做什么？您是要清除输入值还是芯片列表？
如果你想重置芯片列表空的selected变量this.selected = []和form.reset()不起作用，因为你没有在你的html中使用任何形式

【解决方案2】：

这里，你的 formControl 名称是：stateCtrl。

所以你需要做的重置它如下：

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

希望这可行，它在我的情况下有效。

【讨论】：

【解决方案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
}   

...

【讨论】：

【解决方案4】：

我尝试了几种可能性，清理芯片输入，只有这一种有效：

clearInput(input: HTMLInputElement) {
   input.value = '';
   this.inputControl.setValue('');
}

【讨论】：