Obtenga acceso a FormControl desde el componente de formulario personalizado en Angular

Indagamos en todo el mundo on line y así traerte la solución para tu duda, si tienes alguna difcultad puedes dejarnos la pregunta y respondemos con mucho gusto, porque estamos para ayudarte.

Solución:

Esta solución nació de la discusión en el repositorio Angular. Por favor, asegúrese de leerlo o, mejor aún, de participar si está interesado en este problema.

---

He estudiado el código de FormControlName directiva y me inspiró a escribir la siguiente solución:

@Component(
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [
    provide: NG_VALUE_ACCESSOR,
    useExisting: CustomFormComponent,
    multi: true
  ]
)
export class CustomFormComponent implements ControlValueAccessor, OnInit 

  @Input() formControlName: string;

  private control: AbstractControl;


  constructor (
    @Optional() @Host() @SkipSelf()
    private controlContainer: ControlContainer
  ) 
  


  ngOnInit () 

    if (this.controlContainer) 
      if (this.formControlName) 
        this.control = this.controlContainer.control.get(this.formControlName);
       else 
        console.warn('Missing FormControlName directive from host element of the component');
      
     else 
      console.warn('Can't find parent FormGroup directive');
    

  

estoy inyectando al padre FormGroup al componente y luego obtener el específico FormControl de él usando el nombre de control obtenido a través de formControlName Unión.

Sin embargo, tenga en cuenta que esta solución está diseñada específicamente para el caso de uso en el que FormControlName La directiva se usa en el elemento host. No funcionará en otros casos. Para esto necesitará agregar algo de lógica adicional. Si cree que esto debería ser abordado por Angular, asegúrese de visitar la discusión.

Utilizando formControlName como un parámetro de entrada no funciona cuando se vincula a través del [formControl] directiva.

Aquí hay una solución que funciona en ambos sentidos sin ningún parámetro de entrada.

export class MyComponent implements AfterViewInit 

  private control: FormControl;

  constructor(
    private injector: Injector,
  )  

  // The form control is only set after initialization
  ngAfterViewInit(): void 
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) 
      this.control = ngControl.control as FormControl;
     else 
      // Component is missing form control binding
    
  

Sobre la base de las respuestas anteriores y la documentación encontrada en un comentario, esta es mi opinión, la solución más limpia para un ControlValueAccessor componente basado.

// No FormControl is passed as input to MyComponent

export class MyComponent implements AfterViewInit, ControlValueAccessor  

  constructor(@Optional() @Self() public ngControl: NgControl) 
    if (ngControl != null) 
      // Setting the value accessor directly (instead of using
      // the providers) to avoid running into a circular import.
      ngControl.valueAccessor = this;
    
  

    ngAfterContentInit(): void 
       const control = this.ngControl && this.ngControl.control;
       if (control) 
          // FormControl should be available here
       
    

Si sostienes algún reparo o disposición de acrecentar nuestro post eres capaz de escribir una aclaración y con mucho gusto lo leeremos.

---

---

Utiliza Nuestro Buscador