Question

我在Angular中使用软件包 ng-multiselect-dropdown ，我想重置所有字段。我创建了一个带有点击功能的按钮重置所有字段。

component.html ：〜

<div class="row">
  <div class="col-md-6">
    <div class="chk-block">
      <div class="chk-block-title">
        <h3>Informations complémentaires</h3>
      </div>

      <div class="chk-block-content">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="utilitaire">Utilitaire</label>
              <ng-multiselect-dropdown [data]="serviceUtilitaire.listFiltredCursus" name="utilitaireModule"
                [placeholder]="'Choisir les Utilitaire'" [disabled]="disabledUtilitaire"
                [settings]="dropdownSettingsUtilitaire" (onSelect)="onItemSelectUtilitaire($event)"
                (onDeSelect)="OnItemDeSelectUtilitaire($event)" (onSelectAll)="onSelectAllUtilitaire($event)"
                (onDeSelectAll)="onDeSelectAllUtilitaire($event)">
              </ng-multiselect-dropdown>
            </div>
          </div>

          <div class="col-md-4">
            <div class="form-group">
              <label for="prerequis">Prérequis</label>
              <ng-multiselect-dropdown [data]="servicePrerequis.listFiltredCursus" name="prerequisModule"
                [placeholder]="'Choisir les Prérequis'" [disabled]="disabledPrequis"
                [settings]="dropdownSettingsPrerequis" (onSelect)="onItemSelectPrerequis($event)"
                (onDeSelect)="OnItemDeSelectPrerequis($event)" (onSelectAll)="onSelectAllPrerequis($event)"
                (onDeSelectAll)="onDeSelectAllPrerequis($event)">
              </ng-multiselect-dropdown>
            </div>
          </div>

          <div class="col-md-4">
            <div class="form-group">
              <label for="utilitaire">Module</label>
              <ng-multiselect-dropdown [data]="serviceModule.list" name="Module" [placeholder]="'Choisir les Module'"
                [disabled]="disabledModule" [settings]="dropdownSettingsModule" (onSelect)="onItemSelectModule($event)"
                (onDeSelect)="OnItemDeSelectModule($event)" (onSelectAll)="onSelectAllModule($event)"
                (onDeSelectAll)="onDeSelectAllModule($event)">
              </ng-multiselect-dropdown>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>Évaluation</label>
          <div class="input-group">
            <input name="evaluationCursus" #evaluationCursus="ngModel" [(ngModel)]="service.formData.evaluationCursus"
              class="form-control" required>
          </div>
        </div>

        <div class="form-group">
          <label>Sanction</label>
          <div class="input-group">
            <input name="sanctionCursus" #sanctionCursus="ngModel" [(ngModel)]="service.formData.sanctionCursus"
              class="form-control" required>
          </div>
        </div>

        <div class="form-group">
          <label>ID LMS</label>
          <div class="input-group">
            <input name="idLms" #idLms="ngModel" [(ngModel)]="service.formData.idLms" class="form-control"
              placeholder="ID LMS" required>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="form-group btn-style pull-right">
      <button name="ajouter" type="button" class="btn btn-primary btn-labeled mr-2 mb-3" type="submit"
        [disabled]="form.invalid">
        <b><i class="fa fa-plus-circle" aria-hidden="true"></i></b> Ajouter
      </button>

      <button name="reset" type="button" class="btn btn-secondary btn-labeled mr-2 mb-3" (click)="resetForm(form)">
        <b><i class="fa fa-repeat" aria-hidden="true"></i></b> Remise à zéro
      </button>
    </div>
  </div>
</div>

component.ts ：〜

resetForm(form?: NgForm) {
    if (form != null)
      form.form.reset();

    this.service.formData = {
     idCursus : 0,
     intituleCursus : '',
     resumeCursus :'',
     objectifCursus: '',
     evaluationCursus :'',
     publicCursus:'',
     sanctionCursus :'',
     idLms: ''
    }
}

我尝试重置选定的项目属性，但是它不起作用。我已经在功能resetForm中添加了这一行。

this.selectedItemsPrerequis = [];

感谢您的帮助。

Answer 1

我还没有使用ng-multiselect-dropdown，但是它看起来像一些插件，像这样的下拉列表需要在通过脚本更改值之后进行刷新。

请看下面的链接，这与刷新下拉列表无关，但可以选中并取消选中所有功能

https://codesandbox.io/s/821vnk8lzj

重设所有mutliselect下拉式选单

1 个答案: