Angular Materiaal mat-selecteren: annuleren selectie change event

stemmen
0

Ik probeer erachter te komen hoe mat-select (Angular Material 7.3.7) verandering evenement te annuleren en naar de vorige toestand in event handler. Is het mogelijk?

Mijn select control:

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

Wanneer aan bepaalde voorwaarden wordt voldaan Ik wil om de selectie te annuleren en de vorige geselecteerde item. Met behulp van reactieve vormen Ik heb geprobeerd om geselecteerde item op te slaan in een aparte variabele en maak vergelijking in valueChangesinschrijving op competenceVisualOptioncontrole. Maar dit ziet er heel rommelig. Ook heb ik andere afhankelijkheden op deze geselecteerde item, dus ik moet ze handmatig te verwerken.

Ik zou echt waarderen alle hulp. Bij voorbaat bedankt

De vraag is gesteld op 09/10/2019 om 11:55
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

Nou, lijkt erop dat er geen out-of-the-box-functie die ik kan gebruiken. De enige manier om het oplossen van mijn probleem is het 'laatste' geselecteerde waarde op te slaan - ik kan terugdraaien om het indien nodig.

Mijn template code:

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

In selectionchange event handler - selectionChange- ik momenteel geselecteerde waarde op te slaan altijd en vervolgens terug te keren naar het na nieuwe selectie als de gebruiker de antwoorden 'nee' op de vraag (ik gebruik sweetalert2bibliotheek voor 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);
        }
    });
}
antwoordde op 16/11/2019 om 09:29
bron van user

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