Toute tentative d'étendre FormControlDirective à mettre en œuvre mes propres résultats DIRECTRICES FormControl dans la liaison

Question

défectueuse Je suis en train d'inverser la façon forme les contrôles sont eux-mêmes inscrivent sur un FormGroup, de sorte qu'au lieu d'avoir à

@Component({..., template: `<input [formControl]="myControl"`}  
... 

Ou

@Component({..., template: `<input [formControName]="myControlName"`}  
... 

je pouvais

@Component({..., template: `<input myFormControl`}  
... 

Et dire que mon ctive créer et ajouter le FormControl pour moi.

Il est mieux expliqué ce Plankr

Ce qui ne semble pas fonctionner est la liaison la vue du modèle de formulaire, comme vous pouvez le voir, le changement de l'entrée ne change pas la valeur du modèle de formulaire . Le débogage montre qu'il n'y a pas de valueAccessor injecté dans le constructeur (contrairement à la classe FormControlDirective de base). Si vous vous demandez, mon objectif final serait d'avoir un composant de groupe personnalisé parent qui serait @ViewChildren(MyFormDirective), et de les ajouter dynamiquement tous à son formulaire créé.

Answer 1

Vous y êtes presque. Il y a un autre truc cependant. Il n'y a pas DefaultValueAccessor pour cet élément d'entrée, ainsi les arguments constructeurs sont remplis avec la valeur null. Les sélecteurs formControl \ formControlName apparaissent à un autre endroit - the value accessor. Pour que votre directive fonctionne, vous devez implémenter tous les accesseurs de valeur par défaut pour la directive hybridFormControl (en suivant le modèle pour les directives intégrées).

P.S Je crois que le fournisseur de votre directive devrait être corrigée à

providers: [{ 
    provide: NgControl, //<-- NgControl is the key 
    useExisting: forwardRef(() => HybridFormControlDirective) 
}]