InfomediaLtd / angular2-materialize

Angular 2 support for Materialize CSS framework.
https://infomedialtd.github.io/angular2-materialize/
MIT License
407 stars 140 forks source link

material_select multiple problem after reset #449

Open GnRSlash opened 4 years ago

GnRSlash commented 4 years ago

I am using Angular 8 with angular2-materialize (0.100.2) and I have a dropdown with multiple options. I am using reactive forms and everything is ok except after a form reset or submit. The dropdown resets and checkboxes stay unchecked, but when I try to check one of the checkbox that was previously selected before reset, is starts to act inverted (checkbox is selected but form value is not, and when checkbox is not selected, form value is!)

This is the select html part:

      <div #divReWorkType class="input-field col s5" (click)="stopProp($event);">
        <select #cboReWorkType materialize="material_select" multiple
           name="ReWorkType" id="ReWorkType" formControlName="ReWorkType">
          <option disabled hidden>Escolha uma opção</option>
          <option *ngFor="let item of this.refservice.ReWorkTypeStatusItems.Items;" [value]="item.ID">
            {{ item.Descr }}
          </option>
        </select>
      </div>

This is the reset button html:

<input #btnReset type="reset" class="btn" [value]="'Limpar'"
          (click)="hideModal('');">

This is my form:

  createForm() {
    // create the html form with fields and validators
    this.grupo = {
      PVOP: [this.reworkData.Rewo_PVOP, [Validators.required, Validators.minLength(6), Validators.maxLength(11)]]
      , Qtde: [this.reworkData.Rewo_Qtde, [Validators.required, Validators.min(1), Validators.maxLength(3)]]
      , ReWorkType: [this.reworkData.ReWorkTypeUIDs]
    };

    this.refservice.ReWorkTypeStatusItems.Items.forEach(idArea => {
      const txt = this.getAlteracaoByID(idArea.ID);
      this.grupo['alt' + idArea.ID] = [txt];
    });

    this.formulario = this.formBuilder.group(this.grupo);

  }

And this is the hidemodal function:

  hideModal(statusMnemonic: string) {
    this.formulario.reset();
    this.userAction.emit(statusMnemonic);
  }