Angular: Aide sur le formulaire modifiable in-place

Question

J'essaie de créer un formulaire modifiable sur place, dont les contrôles à la fois devraient basculer entre les modes modifiable et affichage seul sur le clic d'un bouton à l'extérieur (je ne veux pas contrôles individuels à cliquer pour basculer en mode édition).

J'ai créé ce StackBlitz où j'obtiens une erreur en disant, No provider for NgControl. Je ne veux pas envelopper les éléments de formulaire sur chacun des composants de contrôle modifiables que je cherche à créer. S'il vous plait, j'ai besoin de votre aide avec ceci.

Mon but le contrôle est quelque chose comme, <editable-control [mode]="formMode" type="text"></editable-control>

Answer 1

votre composant formulaire personnalisé implémente l'interface ControlValueAccessor, donc il a besoin du fournisseur NgControl. Vous devez utiliser le ReactiveFormsModule au lieu du FormsModule.

donc vous devez importer de @angular/forms et l'ajouter à l'importation tableau du NgModule correspondant:

// ... 
import { ReactiveFormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ 
    // ... 
    ReactiveFormsModule 
    ] 
}) 
// ... 

Pour vous utiliser le composant personnalisé, vous pouvez l'utiliser avec formGroup directive. Par exemple:

<form [formGroup]="myForm"> 
    <editable-control [mode]="formMode" type="text" formControlName="myText"> 
    </editable-control> 
</form>