-1

Estoy trabajando con Angular 5 y tengo un formulario con diferentes validaciones. Al tocar un campo aparece el error, pero si salgo del formulario sin enviarlo y vuelvo a entrar, el formulario continúa con los campos en rojo. ¿Alguien sabe como podría limpiar el formulario?

5
  • Tienes el formulario en otro componente distinto? Probaste usar this.nombredelformularioForm.reset(); ? Commented el 19 ene. 2018 a las 12:26
  • Hola, no. Lo tengo en el mismo componente. ya he probado con reset(), pero me borra los placeholders. Commented el 19 ene. 2018 a las 12:30
  • Usas formularios reactivos o basados en plantilla? Commented el 19 ene. 2018 a las 12:32
  • Tenerlo en un componente aparte, resulta mas adecuado y se limpia siempre, al destruirse. setErrors(null) te sacara los campos rojos. Commented el 19 ene. 2018 a las 12:37
  • Pablo Lozano reactivos. Commented el 19 ene. 2018 a las 12:49

1 respuesta 1

-1

No sé cómo has puesto los placeholders, pero usando el siguiente componente, cuando pulsas el botón Clear (ejecutas el método clear(), que simplemente hace un reset() del objeto formulario) se borran todos los campos y se mantienen los placeholders. Aquí puedes ver la demo:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
      </label>
      <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
        Name is required
      </div>
      <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
        Minimum of 2 characters
      </div>
      <div formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <div
          class="error"
          *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
          Email is required
        </div>
        <label>
          <span>Confirm address</span>
          <input type="email" placeholder="Confirm your email address" formControlName="confirm">
        </label>
        <div
          class="error"
          *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
          Confirming email is required
        </div>
      </div>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
      <button type="button" (click)="clear()">Clear</button>
    </form>
  `
})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor() {}
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
      account: new FormGroup({
        email: new FormControl('', Validators.required),
        confirm: new FormControl('', Validators.required)
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
  clear() {
    console.log("clear clicked")
    this.user.reset();
  }
}
2
  • Pablo Lozano muchas gracias!!!!! Commented el 23 ene. 2018 a las 8:41
  • Ayúdanos por favor a que el OP mejores sus preguntas, de lo contrario se continuara agregando información de "baja calidad".
    – Jorgesys
    Commented el 30 nov. 2018 a las 16:36

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.