Skip to content

material_select multiple problem after reset #449

@GnRSlash

Description

@GnRSlash

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);
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions