En esta demostración , el campo de nombre de usuario del formulario de inicio de sesión se muestra en rojo después de hacer clic en el inicio de sesión, aunque el formulario se restablece de esta manera:
submit() { if (this.form.valid) { this.onLogin.emit(this.form.value); this.form.reset(); this.form.markAsPristine(); this.form.markAsUntouched(); this.form.setErrors(null); } }¿Cómo evitamos que el campo de nombre de usuario se pinte de rojo?
Debe agregar el validador requerido a su formulario para verificar la validación; de lo contrario, siempre devolverá verdadero para this.form.valid . Debería ser como sigue:
form: FormGroup = new FormGroup({ username: new FormControl('',[Validators.required]), password: new FormControl('',[Validators.required]), });Nota: asegúrese de importar validadores de @angular/forms
import { Validators } from '@angular/forms';y el mensaje de error no debe enviarse desde el elemento principal porque está buscando errores al enviar el formulario, por lo que el método de envío () debe ser el siguiente:
submit() { if (this.form.valid && this.form.touched) { this.error = '' this.submitEM.emit(this.form.value); }else{ this.error = 'Username or password invalid' }}
Nota: elimine el decorador de entrada para el mensaje de error porque la verificación de validación se realiza en el componente secundario.
error: string | null;