如何在 angular2 中重置 'ss-multiselect-dropdown'

Question

我使用这个包在 angular2 中为我的表单使用了多选下拉控件：https://github.com/softsimon/angular-2-dropdown-multiselect

我想在单击表单的重置按钮时重置此控件。

<form [formGroup]="myForm" (ngSubmit)=save()>
    <ss-multiselect-dropdown [options]="myOptions" formControlName="optionsModel"></ss-multiselect-dropdown>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

如有任何帮助，我们将不胜感激。谢谢

Answer 1

在按钮点击事件中需要设置默认值。

EX:

ngclick(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));

        this.car = new Car();
        this.car.colour = this.colours[1];        
    }

Answer 2

对于 model-driven 表单，您可以通过调用 patchValue.

重置 formControl 的值

reset() {
  this.myForm.get("optionsModel").patchValue([]);  // here multiselect should be reset with an empty array.
}

PLUNKER DEMO

Answer 3

TS:

onReset() {
   this.myForm.reset({
     optionsModel: ['']
   })
}