validation - validacion - validar formulario angular 4

¿Cómo puedo configurar manualmente un campo de formulario angular como no válido?

Question

Estoy trabajando en un formulario de inicio de sesión y si el usuario ingresa credenciales no válidas, queremos marcar los campos de correo electrónico y contraseña como no válidos y mostrar un mensaje que dice que el inicio de sesión falló. ¿Cómo hago para configurar estos campos como no válidos desde una devolución de llamada observable?

Modelo:

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

Método de inicio de sesión:

 @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; 
    });
  }

Además de establecer el indicador inválido de entradas en verdadero, he intentado establecer el indicador email.valid en falso y establecer loginForm.invalid en verdadero también. Ninguno de estos hace que las entradas muestren su estado no válido.

Answer 1

Agregando a la respuesta de Julia Passynkova

Para configurar el error de validación en el componente:

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

Para desarmar el error de validación en el componente:

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

Tenga cuidado al desarmar los errores usando ''nulo'' ya que esto sobrescribirá todos los errores. Si desea conservar algunos, es posible que primero deba verificar la existencia de otros errores:

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

Answer 2

Aquí hay un ejemplo que funciona:

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] ]
  });
}

Answer 3

Aunque fue tarde pero la siguiente solución funcionó de mí.

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

Answer 4

En la nueva versión del material 2, cuyo nombre de control comienza con el prefijo mat setErrors () no funciona, en cambio, la respuesta de Juila se puede cambiar a:

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

Answer 5

En mi forma Reactiva, necesitaba marcar un campo como no válido si se marcaba otro campo. En ng versión 7 hice lo siguiente:

spyOn(component.form, ''valid'').and.returnValue(true);

Así que arriba, cuando marque la casilla, establece el menú desplegable según sea necesario y lo marca como sucio. Si no lo marca como tal, no será inválido (por error) hasta que intente enviar el formulario o interactuar con él.

Si la casilla de verificación está establecida en falso (sin marcar), borramos el validador requerido en el menú desplegable y lo restablecemos a un estado prístino.

Además, recuerde darse de baja de los cambios de campo de monitoreo.

Answer 6

Para prueba unitaria:

spyOn(component.form, ''valid'').and.returnValue(true);

Answer 7

en componente:

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

y en html:

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

Answer 8

setErrors() llamar a setErrors() dentro de un controlador ngModelChange en forma de plantilla. No funcionó hasta que esperé una marca con setTimeout() :

modelo:

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

componente:

@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);
  }
}

Las trampas como esta me están haciendo preferir formas reactivas.