Угловая Материал мата выбрать: отменить событие изменения выбора

голоса
0

Я пытаюсь выяснить, как отменить мат-выбор (Угловая Материал 7.3.7) событие изменения и восстановить предыдущее состояние в обработчике события. Является ли это возможным?

Мой выбор управления:

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

При соблюдении некоторых условий я хочу , чтобы отменить выбор и оставить предыдущий выбранный элемент. Использование реактивных форм Я пытался сохранить выбранный элемент в отдельной переменной и сделать сравнение в valueChangesподписке competenceVisualOptionконтроля. Но это выглядит довольно грязно. Также у меня есть другие зависимости по этому выбранному элементу, поэтому нужно обработать их вручную тоже.

Я бы очень признателен за любую помощь. заранее спасибо

Задан 09/10/2019 в 11:55
источник пользователем
На других языках...                            


1 ответов

голоса
0

Ну, кажется, что нет функции вне коробки, что я могу использовать. Единственный способ решения моей проблемы заключается в хранении «последний» выбранного значения - в случае необходимости я могу откатить к нему.

Мой код шаблона:

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

В обработчик события SelectionChange - selectionChange- Я всегда хранить текущее выбранное значение , а затем вернуться к нему после того, как новый отбор , если пользователь отвечает «Нет» на вопрос (я использую sweetalert2библиотеку для всплывающих окон)

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);
        }
    });
}
Ответил 16/11/2019 в 09:29
источник пользователем

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