Tengo un formulario reactivo angular con Validation.required predeterminado y CustomValidation . Dentro de CustomValidation , tenía la intención de verificar si se toca el control, pero de alguna manera esto no funciona.
import { CustomValidation } from './CustomValidator'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { customForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.customForm = this.fb.group({ customInput: [ '', [Validators.required, CustomValidation.customEmailValidation()], ], }); } } // CustomValidation.ts import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; export class CustomValidation { static customEmailValidation(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (control.touched && control.value.length === 0) { console.log(control); return { customError: { hasError: true, errorType: 'empty field', // this can be any name errorLabel: 'test', }, }; } return null; }; } } <form [formGroup]="customForm"> <input formControlName="customInput" /> <button [disabled]="this.customForm.invalid">Submit</button> </form> Espero que console.log dentro del método estático customEmailValidation registre el objeto de control cuando se toque el campo. Por toque quiero decir, solo hago clic en la entrada. Pero eso no está sucediendo.
También intenté usar updateOn
customInput: ['', {validators:[CustomValidation.customEmailValidation(),Validators.required],updateOn:"blur"}]
Por favor, ayúdame a entender por qué no funciona.
Al principio, antes de tocarlo, form.touched es falso. Así que ese es el primer valor.
Ese valor se está tomando por primera vez como form.touched
Por lo tanto, obtendrá la propiedad tocada como falsa.
Si tiene la intención de tocarlo, simplemente vaya con this.form.markAsTouched() y luego haga la lógica.
Está describiendo el evento de focusin , no el estado touched .
De los documentos angulares:
tocado: booleano Solo lectura Verdadero si el control está marcado como tocado.
Un control se marca como tocado una vez que el usuario ha activado un evento de desenfoque en él.
Estás esperando esto:
Por toque quiero decir, solo hago clic en la entrada. Pero eso no está sucediendo.
Además, el validador personalizado debe ser independiente del estado de entrada del formulario. Puede lograr lo que desea vinculando el evento focusin y usándolo para cambiar el estado touched . No entiendo por qué querrías hacer esto desde una perspectiva de UX, pero oye.
Modelo
<form [formGroup]="customForm"> <input (focusin)="onFocusIn($event)" formControlName="customInput" /> <button [disabled]="this.customForm.invalid">Submit</button> </form> <span *ngIf="this.customForm.invalid && this.customForm.touched" >VERY SERIOUS ERROR</span >Componente
onFocusIn(event) { this.customForm.markAsTouched(); console.log('focus'); }Validador
static customEmailValidation(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (control.value.length === 0) { console.log(control); return { // ...control.errors, customError: { hasError: true, errorType: 'empty field', // this can be any name errorLabel: 'test', }, }; } return null; }; }Puede leer más sobre los controles de formulario personalizados aquí en los documentos de Angular.