Comment puis-je appliquer "ngModel # something =" ngModel "" à un élément de formulaire dynamique dans un formulaire basé sur un modèle?

Question

Je reçois une erreur lors de la soumission de mon formulaire en disant qu'il n'est pas défini. J'ai commencé des recherches et découvert que je devais ajouter ngModel #something="ngModel à chacun de mes entrées pour que la forme de ramasser sur les entrées comme dans l'exemple ci-dessous à partir de ce site https://toddmotto.com/angular-2-forms-template-driven

<input 
    type="email" 
    placeholder="Your email address" 
    name="email" 

    ngModel 
    #userEmail="ngModel" 

    required> 

Jolie straitforward et simple, sauf dans mon J'ai créé un composant question-shell qui gère tous mes différents types de questions en déclenchant une condition ngIf dans le modèle en fonction d'un champ template dans mes données, donc ma saisie de texte ressemble à ceci.

<!-- SMALL TEXT INPUT --> 
<ng-container *ngIf="Data.template == 'sm_input'"> 

    <fieldset class="col-xs-12 col-sm-6 col-md-4"> 

     <label class="form-group center-block"> 
      <input class="form-control" type="hidden" [attr.value]="Data.question"> 
      {{Data.question}}: 
      <input class="form-control" 
       [attr.id]="Data.id" 
       [attr.name]="Data.name" 
       [(ngModel)]="UserResponse.answer" 
      > 
     </label> 

    </fieldset> 

</ng-container> 

En raison de la nature de mon élément, je ne peux pas ajouter

ngModel 
#email="ngModel" 

à mes entrées dans son ensemble, car il sera utilisé pour les noms, les numéros de téléphone, sites Web, etc. En outre si J'ai un tas d'éléments avec le même nom dans le formulaire, je suppose qu'ils vont tous redéfinir la même propriété sur le formulaire dans son ensemble, ce qui me donne des résultats incomplets.

Jusqu'à présent, la façon dont la forme est mis en place va comme ceci

questionnaire template

<form #branding="ngForm" (ngSubmit)="onSubmit(branding)" class="col-xs-12"> 
    <ng-container *ngFor="let a of Data?.sections"> 
     <question-shell *ngFor="let b of a.questions" [Data]="b"></question-shell> 
    </ng-container> 

    <button type="submit" class="btn">Submit</button> 

</form> 

alors le question-shell a différents morceaux de html comme dans l'exemple ci-dessus j'ai donné que les données se lie à. Y a-t-il un moyen de stocker une valeur dans mes données que je peux utiliser pour créer ceci de façon dynamique? Voici un plunker, s'il vous plaît excusez le bootstrap ne fonctionne pas. Merci d'avance.

Answer 1

Après façon dont je l'ai utilisé pour lier le nom et l'attribut désactivé à mon modèle dynamique, dans votre cas cela peut varier pour ngModel mais donnant ce titre de référence

// question-shell.component.ts 
export class question-shell implements OnInit { 
    @Input() nmgModel: any; 
} 
// question-shell.component.html 
<ng-container *ngIf="Data.template == 'sm_input'"> 

    <fieldset class="col-xs-12 col-sm-6 col-md-4"> 

     <label class="form-group center-block"> 
      <input class="form-control" type="hidden" [attr.value]="Data.question"> 
      {{Data.question}}: 
      <input class="form-control" 
       [attr.id]="Data.id" 
       [attr.name]="Data.name" 
       [(ngModel)]="{{nmgModel}}" 
      > 
     </label> 

    </fieldset> 

</ng-container> 

// questionnaire template 
<form #branding="ngForm" (ngSubmit)="onSubmit(branding)" class="col-xs-12"> 
    <ng-container *ngFor="let a of Data?.sections"> 
     <question-shell *ngFor="let b of a.questions" [Data]="b" [ngModel]="value"></question-shell> 
    </ng-container> 

    <button type="submit" class="btn">Submit</button> 

</form>