validering - Angular2/material 2: md-input-container etikett nullstiller ikke flyt når verdien endres programmessig

Jeg har et problem med å bruke @angular/materials md-input-containers og modul for reaktive skjemaer.

Jeg lager et påloggingsskjema med tre md-inputs som alle er koblet til verdier ved hjelp av FormBuilder's FormGroup. Alt der fungerer bra.

Mitt problem er at i ngSubmit-funksjonen blir skjemaet tilbakestilt hvis opplysningene som er lagt inn er ugyldige. Å bruke .reset()-metoden til FormGroup vil tilbakestille verdiene til standard, men de flytende etikettene i md-input-containers tilbakestilles ikke til sin opprinnelige plass, slik de burde på et tomt felt. Jeg antar at Material Design-direktivene ser etter et blur-event for å oppdatere dette, men jeg kan ikke si, og jeg vet ikke hvordan jeg kan tvinge det til å skje.

Her er ngSubmit-funksjonen:

  submitForm(username: string, password: string, companyID: any):void {

    this.userService.login(username, password, companyId)
      .then(() => {
        this.router.navigate(['main']);
      })
      .catch(() => {
        this.loginForm.reset();
      })
    }

og når this.loginForm.reset() blir kalt, vil skjemaene tilbakestilles til standard (tomme strenger), men etikettene vil fortsatt flyte:

Etiketter flyter fortsatt. Jeg tilbakestilte selskaps-ID for referanse.

Noen idé om hvordan man kan fikse dette? Jeg vil egentlig ikke bruke en ElementRef, selv om jeg allerede har prøvd å gjøre det for å tvinge en blur, og det løste det ikke.

Svar #1

Prøv å bruke md-input-kontroll i stedet for input pakket inn i md-input-container. Det fungerte for meg.

Relaterte artikler