Implementé un componente personalizado que es un contenedor para una entrada con NgModel. Los conecté con un ControlValueAccessor. Funciona bien, puedo acceder fácilmente a los valores de mi componente principal.
Pero si trato de llamar a markAsDirty(), la bandera tocada solo cambia en mi componente, no tiene ningún efecto en mi entrada dentro del componente. Te daré un ejemplo:
// Parent Component onSubmit(form: NgForm) { this.form.controls.registerEmail.markAsDirty(); } // Thats how the component looks like in my form: <form #form="ngForm" (ngSubmit)="onSubmit(form)" [ngClass]="{'has-error': !form.valid}"> <form-text label="E-Mail" name="registerEmail" email required placeholder="" [(ngModel)]="eMail"></form-text> </form> // Result <form-text label="E-Mail" name="registerEmail" class="ng-untouched ng-invalid ng-dirty"> <label for="form-text-2">E-Mail</label> <input class="input-control invalid ng-untouched ng-pristine ng-invalid" type="text" id="form-text-2"> </form-text>Como puede ver, el texto del formulario tiene la clase "ng-dirty", la entrada interna permanece impecable.
Para implementar mi componente personalizado, utilicé una de las muchas instrucciones que encuentra en la web. Aquí está el que usé: control de formulario personalizado angular2 con entrada json de validación
Quiero marcar todos los campos de entrada como sucios cuando se presiona el botón Enviar. Porque aparece mi validación, cuando borras la entrada.
Descubrí que existe el problema que mi componente hereda de ControlValueAccessor. La única conexión entre mi componente y mi NgForm es sobre su NgModel. NgForm puede usar mi componente como FormControl porque tiene su propio NgModel. Sobre eventos es posible pasar valores en dos direcciones. Pero no es posible con métodos como markAsDirty() o markAsTouched(). Dentro del componente no hay problema. Pero mi NgForm no tiene acceso real a los componentes. Solo a NgModel.
¿Hay alguna manera de implementar eso? Pensé que no es tan difícil de averiguarlo, pero estoy luchando durante mucho tiempo con eso. Mi única solución por el momento es iterar sobre cada entrada con jQuery para activar un foco. Debe haber una solución más limpia para eso.
Gracias
Puede pasar como entrada en el componente que implementa ControlValueAccessor la propiedad dirty del formulario y luego actualizar el estado de su entrada interna usando ReactiveFormsModule y FormControl .
El componente que contiene su forma:
<form #myForm="ngForm" (submit)="onSubmit($event)"> <my-input name="my-input" [(ngModel)]="myInput" [formDirty]="myForm.dirty"></my-input> <button type="submit">Submit</button> </form> Luego, en el componente que implementa ControlValueAccessor :
ngOnChanges({ formDirty }: SimpleChanges) { if (formDirty.currentValue) { this.inputCtrl.markAsDirty(); } else { this.inputCtrl.markAsPristine(); } }Debe llamar a onTouched() (this._onTouchedCallback) desde el interior de su componente cuando desee que el estado de los controles se establezca en tocado. Lo mismo para esto._onChangeCallback
Por ejemplo, agregando (ngModelChange)="onTouched(value)" a la etiqueta de entrada en my-custom-input
Copiado de: https://github.com/angular/angular/issues/10151
El problema es que no hay una manera fácil de recibir una notificación cuando cambia el estado sucio. Consulte https://github.com/angular/angular/issues/10887 .
Directiva auxiliar:
@Directive({ selector: 'my-input' }) export class MagickDirective implements DoCheck { constructor(private control:NgModel){ } ngDoCheck(): void { //you can do whatever you want if(this.control.dirty) { (this.control.valueAccessor as MyInputComponent).setDirty(true); } } }