web-dev-qa-db-fra.com

Comment obtenir une instance FormControl à partir de ControlValueAccessor

J'ai le composant suivant:

@Component({
    selector: 'pc-radio-button',
    templateUrl: './radio-button.component.html',
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
    ]
})
export class RadioButtonComponent implements ControlValueAccessor {
    ...
}

Je peux affecter et modifier la valeur via ces entrées:

<pc-radio-button [formControl]="formControl"></pc-radio-button>
<pc-radio-button [formControlName]="inputControlName"></pc-radio-button>

Cependant, j'ai besoin que le composant ait un accès direct au formControl assigné, car j'ai besoin d'ajouter des styles en fonction de son état.

En créant un @ Input () formControl ne résout pas le problème. Comme il ne couvre pas le cas où le contrôle de formulaire est attribué via formControlName.

angularcontrolsdirectiveaccessor
16
Gediminas Bublys

Il semble que injector.get (NgControl) lance un avertissement de dépréciation, donc je voulais faire un carillon avec une autre solution:

constructor(public ngControl: NgControl) {
  ngControl.valueAccessor = this;
}

L'astuce consiste à supprimer également NG_VALUE_ACCESSOR du tableau des fournisseurs, sinon vous obtenez une dépendance circulaire.

Vous trouverez plus d'informations à ce sujet dans cet exposé de Kara Erickson de l'équipe Angular team .

19
Jesse

Une solution possible est d'obtenir une instance de NgControl via Injector:

import { NgControl } from '@angular/forms';
export class PasswordComponent implements ControlValueAccessor {
  ...
  ngControl: NgControl;

  constructor(private inj: Injector) {
    ...
  }

  ngOnInit() {
    this.ngControl = this.inj.get(NgControl)
  }

alors vous pouvez obtenir un statut comme

ngControl.control.status

Voir également

13
yurzui

Va de ma réponse à cela question stackblitz

Une autre solution consiste à ajouter en tant que fournisseur NG_VALIDATORS. Ainsi, dans notre fonction valider, nous pouvons stocker le contrôle dans une variable

public validate(c: FormControl) {
  if (!this.control)
    this.control=c;
  return null;

Voir stackblitz

0
Eliseo