it-swarm.com.de

Wie kann ich ein Winkelfeld manuell als ungültig festlegen?

Ich arbeite an einem Anmeldeformular. Wenn der Benutzer ungültige Anmeldeinformationen eingibt, möchten wir sowohl die E-Mail- als auch die Kennwortfelder als ungültig markieren und eine Meldung anzeigen, dass die Anmeldung fehlgeschlagen ist. Wie kann ich festlegen, dass diese Felder aufgrund eines beobachtbaren Rückrufs ungültig sind?

Vorlage:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

Login-Methode:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
      this.loginForm.controls.email.invalid = true;
      this.loginForm.controls.password.invalid = true; 
    });
  }

Zusätzlich zum Setzen des ungültigen Flags der Eingaben auf true habe ich versucht, das Flag email.valid auf false zu setzen und auch den Code loginForm.invalid auf true zu setzen. Keines davon bewirkt, dass die Eingänge ihren ungültigen Status anzeigen.

80
efarley

in der Komponente:

formData.form.controls['email'].setErrors({'incorrect': true});

und in html:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
119

Die Antwort von Julia Passynkova ergänzt

So legen Sie den Überprüfungsfehler in der Komponente fest:

formData.form.controls['email'].setErrors({'incorrect': true});

So setzen Sie den Validierungsfehler in der Komponente zurück:

formData.form.controls['email'].setErrors(null);

Seien Sie vorsichtig, wenn Sie die Fehler mit "null" löschen, da dadurch alle Fehler überschrieben werden. Wenn Sie einige in der Umgebung behalten möchten, müssen Sie möglicherweise zuerst nach anderen Fehlern suchen:

if(isIncorrectOnlyError){
   formData.form.controls['email'].setErrors(null);
}
49
Eric D.

Ich habe versucht, setErrors() in einem ngModelChange-Handler in einem Vorlagenformular aufzurufen. Es hat nicht funktioniert, bis ich einen Moment mit setTimeout() gewartet habe:

vorlage:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

komponente:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    // setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    // to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

Gotchas wie diese lassen mich reaktive Formen bevorzugen.

13
Mark Rajcok

In der neuen Version von Material 2, deren Steuerelementname mit dem Mattenpräfix setErrors () beginnt, funktioniert die Antwort von Juila nicht wie folgt:

formData.form.controls['email'].markAsTouched();
11
M.Farahmand

Hier ist ein Beispiel, das funktioniert:

MatchPassword(AC: FormControl) {
  let dataForm = AC.parent;
  if(!dataForm) return null;

  var newPasswordRepeat = dataForm.get('newPasswordRepeat');
  let password = dataForm.get('newPassword').value;
  let confirmPassword = newPasswordRepeat.value;

  if(password != confirmPassword) {
    /* for newPasswordRepeat from current field "newPassword" */
    dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
    if( newPasswordRepeat == AC ) {
      /* for current field "newPasswordRepeat" */
      return {newPasswordRepeat: {MatchPassword: true} };
    }
  } else {
    dataForm.controls["newPasswordRepeat"].setErrors( null );
  }
  return null;
}

createForm() {
  this.dataForm = this.fb.group({
    password: [ "", Validators.required ],
    newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
    newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
  });
}
1
Roman None

Obwohl es spät ist, aber folgende Lösung von mir gearbeitet hat.

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;
0
Dila Gurung

In meinem reaktiven Formular musste ich ein Feld als ungültig markieren, wenn ein anderes Feld markiert war. In der ng Version 7 habe ich folgendes gemacht:

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

Wenn ich also oben das Kästchen ankreuze, wird das Dropdown-Menü wie erforderlich festgelegt und als fehlerhaft markiert. Wenn Sie es nicht als solches markieren, wird es nicht ungültig (aus Versehen), bis Sie versuchen, das Formular abzusenden oder mit ihm zu interagieren.

Wenn das Kontrollkästchen auf false gesetzt ist (nicht markiert), deaktivieren Sie den erforderlichen Validator in der Dropdown-Liste und setzen ihn in einen ursprünglichen Zustand zurück.

Denken Sie auch daran, sich von den Änderungen im Überwachungsfeld abzumelden!

0
Katana24