CODEWITHSUNDEEP
angularangular2-forms
Julius
Julius

Reputation: 2864

Angular 2 - how to bind to a "dynamic" form field

I am building a form generator with Angular 2. The form fields are defined in a datastore somewhere and rendered as a form at runtime by my Angular 2 template. I am trying to setup form binding for the dynamic form, but haven't succeeded so far.

The first approach I took is below. An input element is rendered conditionally if the current form element ('element') if of type TEXT_INPUT. There is a model class ('model') defined in the backing component and I would like the input form element to bind to model.{{element.systemName}}.

<input *ngIf="element.type == 'TEXT_INPUT'" type="text"
[(ngModel)]="model.{{element.systemName}}" 
class="field-long" placeholder="{{element.label}}" 
name="{{element.systemName}}" />

This approach doesn't work. {{}} is not allowed as a value to ngModel.

My second approach didn't work either, because "this" doesn't exist. 

<input (keyup)="updateModel(this)" (blur)="updateModel(this)"
*ngIf="element.type == 'TEXT_INPUT'" type="text" 
class="field-long" placeholder="{{element.label}}" 
name="{{element.systemName}}"/>

Is there some way I can refer to the current form element and send that to the backing component like updateModel(ref.to.current.form.element)?

It seems that placing #myElementName on the element would create a reference, which would allow me to call updateModel(myElementName). But there again I run into the problem that I need a dynamic name like this #{{element.systemName}}.

I am completely new to Angular 2, so I am hoping I am overlooking something obvious here.

Thanks.

Upvotes: 2

Views: 11476

Answers (2)

Meligy
Meligy

Reputation: 36594

There's an official documentation page about exactly this:

Dynamic Forms

In it they build a questionnaire / survey form where the list of questions and their types (text, select, radio, etc) are stores in dynamic object (to simulate coming from DB).

The idea is:

  1. ngFor for list of questions
  2. Each question is the same component
  3. The question component has ang ngSwitch that chooses which form control to use

See the live example and source code.

Upvotes: 1

Alexandru Pufan
Alexandru Pufan

Reputation: 1912

You can reference the object using square brackets notation, like this:

<input *ngIf="element.type == 'TEXT_INPUT'" type="text"
[(ngModel)]="model[element.systemName]" />

Upvotes: 2

Related Questions