Emitir evento al componente cuando los validadores son borrados.
He creado un componente de entrada personalizado. Su etiqueta se muestra cuando hay una restricción requerida (calculada en OnInit).
@Component({
selector: 'custom-input',
template: '<div *ngif="isMandatory()">Obligatorio</div><input>'
})
export class CustomInput implements ControlValueAccessor, OnInit {
mandatory = false;
constructor(
@Self()
@Optional()
public ngControl: NgControl
) {
super(ngControl);
}
ngOnInit(): void {
this.mandatory = this.isMandatory();
}
public isMandatory(): boolean {
let mandatory = false;
if (this.ngControl) {
const errors = new FormControl(”, this.ngControl.control.validator, this.ngControl.control.asyncValidator).errors;
mandatory = errors?.required;
}
return mandatory;
}
writeValue(value: string): void {
this.value = value;
}
…
Digamos que la restricción cambia. Me gustaría actualizar la etiqueta a medida que la entrada se vuelve opcional.
```typescript
this.form = this.formBuilder.group({
custominput: new FormControl(null, Validators.required)
});
// eliminar el validador requerido => quiero volver a calcular la variable 'mandatory'
this.form.controls.customInput.clearValidators();
this.form.controls.customInput.updateValueAndValidity();
¿Cómo puedo actualizar mi etiqueta (enviar un evento dentro de mi componente)? Me gustaría evitar suscribirme a statusChanges.
El único truco que he encontrado es:
writeValue(value: string): void {
this.value = value;
this.mandatory = this.isMandatory();
}
...
this.form = this.formBuilder.group({
customInput: new FormControl(null, Validators.required)
});
this.form.controls.customInput.clearValidators();
// Para activar la función writeValue
this.form.controls.customInput.setValue(this.form.controls.customInput.value);
this.form.controls.customInput.updateValueAndValidity();
davy.ai
Para actualizar la etiqueta en el componente de entrada personalizado cuando cambia la restricción requerida, puedes aprovechar el método
writeValue. Este método es llamado por Angular cada vez que cambia el valor de la entrada. Por lo tanto, puedes actualizar la variablemandatorydentro del métodowriteValuepara reflejar la nueva restricción.Primero, necesitas eliminar el validador requerido y actualizar el valor y la validez del control. Esto activará el método
writeValuede tu componente de entrada personalizado. Sin embargo, necesitas forzar que este método se ejecute estableciendo el valor del control como sí mismo.Dentro del método
writeValuede tu componente de entrada personalizado, puedes actualizar la variablemandatoryllamando nuevamente al métodoisMandatory.De esta manera, la etiqueta se actualizará siempre que cambie el estado obligatorio de la entrada, sin necesidad de suscribirse a cambios de estado.