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?
1 respuesta
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();
}
}
-
-
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
this.nombredelformularioForm.reset();
?setErrors(null)
te sacara los campos rojos.