Matériel angulaire mat sélectionnez: annuler l'événement de changement de sélection

voix
0

J'essaie de comprendre comment annuler tapis de sélection (Matériel angulaire 7.3.7) événement de changement et de restauration à l'état précédent dans le gestionnaire d'événements. C'est possible?

Ma sélection contrôle:

                <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>

Lorsque certaines conditions sont remplies , je souhaite annuler la sélection et laisser précédent élément sélectionné. En utilisant des formes réactives j'ai essayé de stocker élément sélectionné dans la variable séparée et faire une comparaison dans l' valueChangesabonnement de competenceVisualOptioncontrôle. Mais cela semble tout à fait désordre. Aussi j'ai d' autres dépendances de cet élément sélectionné, donc je vais avoir besoin de les traiter manuellement aussi.

Je vous en serais reconnaissant toute aide. Merci d'avance

Créé 09/10/2019 à 11:55
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Eh bien, semble qu'il n'y a pas de fonction hors-the-box que je peux utiliser. La seule façon de résoudre mon problème est de stocker « dernière » valeur sélectionnée - Je peux rollback si nécessaire.

Mon code de modèle:

                <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>

Dans gestionnaire d'événements SelectionChange - selectionChange- je stocke toujours la valeur actuelle sélectionnée, puis y revenir après une nouvelle sélection si de Non à la question des réponses des utilisateurs (j'utiliser la sweetalert2bibliothèque pour popups)

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);
        }
    });
}
Créé 16/11/2019 à 09:29
source utilisateur

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