"ngModel＃something =" ngModel ""をテンプレート駆動型の動的フォーム要素に適用するにはどうすればよいですか？

Question

フォームが送信されていないとエラーが表示されます。私は研究を開始し、このウェブサイトから、以下の例のような入力に私を除いてhttps://toddmotto.com/angular-2-forms-template-driven

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

    ngModel 
    #userEmail="ngModel" 

    required> 

プリティstraitforwardとシンプルを、ピックアップしてフォームのために、私は私の入力のそれぞれにngModel #something="ngModelを追加する必要が発見しましたケースquestion-shellのコンポーネントを作成し、テンプレート内でngIfという条件をトリガーして、データ内のtemplateフィールドに応じてテキストの入力を行うようにしました。原因ならば、それはそれに加えて名前、電話番号、ウェブサイトなどに使用されますので、私はちょうど全体としての私の入力に

ngModel 
#email="ngModel" 

を追加することはできません私のコンポーネントの性質に

<!-- 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> 

私はフォームの中に同じ名前の要素がたくさんあることを推測しています。フォーム全体で同じプロパティを再定義するだけで、不完全な結果が得られます。

は、これまでのところ、フォームが設​​定されている方法は、この

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> 

その後、question-shellが、私はデータがバインドすることは、上記与えた例のように、HTMLの異なるチャンクを持っているように書きます。これをどうにかして動的に作成するために使用できるデータに値を格納する方法はありますか？ここにはプランカがありますが、ブートストラップが動作しないことは間違いありません。前もって感謝します。私が読んで、あなたが（それ自体でngModelを使用する場合

Answer 1

、これはngModelのために異なる場合があり、私はあなたのケースでは、私の動的なテンプレートに名前とdisabled属性をバインドするために使用した方法に従うが、参照

// 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>