Angulaire 2 la création de formes réactives avec des composants imbriqués

Mon exigence est que j'ai besoin de créer un formulaire avec des composants imbriqués.
Je suis de la création de composants pour chaque champ de formulaire de moyens pour la zone de texte, il y aura
être un élément, bouton radio, il y aura un autre composant comme des sages.
<form [formGroup]="myForm"> <textbox-component></textbox-component> <radioButton-component></radioButton-component> </form>

Et je veux utiliser des formes Réactives pour la création de cette forme que je veux que mon
code html pour être vierge et avoir mon formulaire de validations par le biais de la machine.

Mais je ne peux pas le trouver n'importe quelle solution comment peut-on avoir des formes réactives imbriquée avec
des composants.

Peut-être que chaque composant va le garder propre les validateurs. À soumettre, chaque composant émettent de la valeur pour le composant parent par le service ou l'événement de l'émetteur... Pas testé, mais cela devrait fonctionner
Je ne suis pas en mesure d'ajouter formControlName de propriété(qui est nécessaire pour les formes réactives) dans le code html à l'intérieur des composants enfant, c'est jeter de l'erreur de parent directive fromGroup n'est pas présent(car il est présent dans le parent)
C'est pourquoi chaque composant doit garder son propre formControlName et les validateurs. Le composant parent rôle sera instancier le formulaire et obtenir toutes les données à envoyer. Les enfants composant le feu valide ou un événement d'erreur et d'informer les parents pour autoriser ou non la soumission ... Prendre un coup d'oeil à Imbriqués Model Driven Formulaire
J'ai été par le biais de ce post, mais il est très statique exemple. Je suis de la génération du formulaire par le rendu des composants dynamiquement à la volée. Recherché net, mais ne pas trouver une aide quelconque à l'exception de ce post. Je pense angulaire 2 est en phase initiale & documentation appropriée n'est pas disponible. Alors, comment trouver de l'aide pour les nouvelles fonctionnalités dans angulaire 2?

OriginalL'auteur Mahesh Saibalwar | 2017-03-01

34

Après mes recherches & expériences, j'ai trouvé une réponse à ma question, donc, de répondre à moi-même. Si il sauve quelqu'un moment, puis je vais être heureux.

Si vous souhaitez créer des formes réactives avec des composants imbriqués, alors vous pouvez faire comme ci-dessous

Ici, je suis entrain de créer un formulaire avec deux composants imbriqués l'un textbox & d'autres pour la radio bouton

Votre composant parent peut être comme ça
```
<form [formGroup]="myForm">
    <child-textbox-component [parentFormGroup]="myForm">
    </child-textbox-component>
    <child-radio-button-component [parentFormGroup]="myForm">
    </child-radio-button-component>
</form>
```
Nous sommes en train de FormGroup objet en tant qu'entrée pour les composants enfants, qui a été créé dans le composant parent
comme entrée pour les composants enfants, ils vont utiliser cette FormGroup objet dans leur
composante de la conception spécifique de contrôle de la classe

Votre enfant composants sera comme ceci

enfant-zone de texte-composant
```
<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>
```
enfant-radio-bouton-composant
```
<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <div>
      <label *ngFor="let value of control.values; let idx = index"
        class="radio-inline" [title]="control.tooltip">
        <input type="radio" [name]="control.name" [formControlName]="control.name"/>
        {{ value }}
      </label>
  </div>
</div>
```
Ici de contrôle est le modèle de la classe contenant les données à afficher pour ces
les composants enfants.

De cette façon, vous pouvez avoir votre formulaire doit être généré à l'aide de composants imbriqués,
de sorte que vous n'avez pas besoin de votre formulaire (peut dire grande forme) dans un même
composante. Vous pouvez le décomposer pour autant, les sous-composants & formulaire
être facile à créer & maintenir également à l'aide de formes réactives de l'angulaire 2. Vous pouvez également facilement ajouter des validations trop.

J'ai suivi ces liens avant de répondre à cette
1. quelque chose de similaire sur stackoverflow
2. angulaire 2 formulaires dynamiques
Comment faites-vous validations à l'enfant composants? Peut-on ajouter des validations à la à partir à l'enfant de composants ou de définir toutes les validations des parents? Vous pouvez poster votre .ts fichier de code
Cette réponse paraît utile, mais il est incomplet. Pouvez-vous s'il vous plaît poster votre TS code? À savoir, comment et où vous définissez les FormGroup objet et de ses commandes.
Vous pouvez suivre ce tutoriel ce génial toddmotto.com/...

OriginalL'auteur Mahesh Saibalwar
1

À étendre la liste des réponses possibles, cet article par Alexey Zuev suggère d'utiliser provide:ControlContainer et useExisting:NgForm dans le composant décorateur comme un moyen de transmettre la ngForm directive dans un composant enfant.
```
@Component({
  selector: 'registrant',
  templateUrl: 'app/register/registrant.component.html',
  **viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]**
})
```
OriginalL'auteur PoorInRichfield
0

juste passer même ou sous formGroup en forme de bloc avec [formGroup] de liaison.

OriginalL'auteur xsilen T

Remarque supplémentaire à Mhesh réponse, vous pouvez construire cette sames solution sans injection de [parentFormGroup] dans le code HTML. Vous pouvez le faire en suivant ce Un Débordement de pile post sur réutilisables former des groupes.

C'est vraiment sympa.

Exemple

De prendre la solution existante, vous pouvez faire la même chose, sauf:

Votre composant parent peut être comme ça, sans paramètres supplémentaires passé dans

<form [formGroup]="myForm">
    <child-textbox-component></child-textbox-component>
    <child-radio-button-component></child-radio-button-component>
</form>

Note en outre vous pouvez définir des formgroups comme ceci:

<form [formGroup]="myForm">
    <child-textbox-component></child-textbox-component>
    <child-radio-button-component formGroupName="myGroup"></child-radio-button-component>
</form>

enfant-zone de texte-composant

<div class="form-group" [formGroup]="controlContainer.control">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>

Pour activer ce que vous voulez injecter un ControlContainer dans votre @Component

@Component({
    moduleId: `MODULE_ID_HERE`,
    selector: "child-textbox-component",
    templateUrl: "childTextbox.component.html",
})
export class ChildTextboxComponent {
    constructor(private controlContainer: ControlContainer, OTHER_PARAMETERS) {
    }
}

OriginalL'auteur Stormswept

Vous devez vous connecter pour publier un commentaire.