Material angulară mat-selectați: anula eveniment de modificare de selecție

voturi
0

Am încercat să dau seama cum de a anula eveniment de modificare a-mat select (Material Angular 7.3.7) și readuce la starea anterioară în tratare a evenimentului. Este posibil?

selectați Controlul meu:

                <mat-form-field>
                    <mat-select #visualOptionsSelect formControlName=competenceVisualOption (selectionChange)=visualOptionSelectionChanged($event)
                                required>
                        <mat-option *ngFor=let visualOption of availableVisualOptions [value]=visualOption>
                            {{visualOption.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

Atunci când sunt îndeplinite anumite condiții pot anula selecția și lăsați un element selectat anterior. Folosind forme reactive am încercat pentru a stoca elementul selectat în variabilă separată și să facă comparații în valueChangesabonament de competenceVisualOptioncontrol. Dar acest lucru pare destul de murdar. De asemenea , am alte dependențe de acest element selectat, prin urmare , va trebui să le proceseze si manual.

Mi-ar aprecia cu adevărat orice ajutor. Mulțumesc anticipat

Întrebat 09/10/2019 la 11:55
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
0

Ei bine, se pare că nu există nici o caracteristică out-of-the-box pe care le pot folosi. Singura modalitate de a rezolva problema mea este de a stoca „ultima“ valoare selectată - I se poate reveni să-l dacă este necesar.

Codul meu șablon:

                <mat-form-field>
                    <mat-select #visualOptionsSelect placeholder="Тип отображения" formControlName="templateCompetenceVisualOption" (selectionChange)="visualOptionSelectionChanged($event.value)"
                                required>
                        <mat-option *ngFor="let visualOption of availableVisualOptions" [value]="visualOption">
                            {{visualOption.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

În tratare a evenimentului selectionchange - selectionChange- Am întotdeauna stoca valoarea selectată curent și apoi reveniți la ea după nouă selecție în cazul în care răspunsurile utilizatorilor „nu“ la întrebarea (am folosi sweetalert2biblioteca pentru popup - uri)

visualOptionSelectionChanged(selectedVisualOption: CompetenceVisualOption) {

    //если ранее поле было не заполнено, то не задаем вопрос
    if (!this.lastActiveVisualOption) {

        //перезапишем предыдущее активное значение
        this.lastActiveVisualOption = selectedVisualOption;
        return;
    }

    swal({
        text: 'При смене отображения вариантов ответов, предыдущие значения сбросятся. Сменить отображение ответов?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Да',
        cancelButtonText: 'Нет',
        confirmButtonClass: "btn btn-primary",
        cancelButtonClass: "btn btn-secondary cfb-btn-border",
        buttonsStyling: false
    }).then((result) => {
        if (result.value) {

            // перерисуем область ответов
            this._setRatingLevelOptionsComponent(selectedVisualOption.code);
            //перезапишем предыдущее активное значение
            this.lastActiveVisualOption = selectedVisualOption;
        }
        else {
            //если выбрали Нет, то вернем прежний вариант и варианты ответа не трогаем
            this.templateCompetenceVisualOption.setValue(this.lastActiveVisualOption);
        }
    });
}
Publicat 16/11/2019 la 09:29
sursa de către utilizator

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more