How can I bind 2 variables inside 1 property binding in angular 2?

Question

I'm trying to dynamically generate and use form controls from my json data. A simple experiment I came up with to figure out the mechanics I need to apply goes as follows.

variables defined in class

demoA: string         = 'name';
demoB: Array<string>  = ['city', 'state'];
demoC: FormGroup      = new FormGroup({});

function for grabbing properties from demoA and demoB and converting into FomControls

loadStuff(){
    let a = this.demoA;
    let b = this.demoB;
    let ab: Array<string> = [];

    ab.push(a);
    b.forEach( bb => {ab.push(bb)} );
    console.log(ab);

    ab.forEach( ctrl => this.demoC.addControl(ctrl, new FormControl('')) );

    console.log( this.demoC.value );
}

Now the value of demoC is

demoC: {name:'', city:'', state:''}

Due to the fact that I'm creating this on the fly when my component loads, there's no predefined way for me to bind to it, which led me to wonder if I can bind to it inside the binding on the input something like this

<input type="text" [(ngModel)]="demoC.{{demoA}}" />

of course that didn't work, neither did

<input type="text" [(ngModel)]="demoC.[demoA]" />

<input type="text" [(ngModel)]="demoC.[(demoA)]" />

<input type="text" [(ngModel)]="demoC.(demoA)" />

<input type="text" [(ngModel)]="(demoC)+'.'+(demoA)" />

<input type="text" [(ngModel)]="[(demoC)+'.'+{{demoA}}]" />

<input type="text" [(ngModel)]="('demoC.'+{{demoA}})" />

<input type="text" [(ngModel)]="['demoC.'+{{demoA}}]" />

<input type="text" [(ngModel)]="['demoC.'+[demoA]]" />

<input type="text" [(ngModel)]="[('demoC.')+[demoA]]">

If I want the result to be demoC.nameHow do I go about doing this?

Suren Srapyan · Accepted Answer · 2017-09-29 03:33:32Z

1

Why {{}} syntax ? You can bind simply using [(ngModel)]=demoC[demoA] thi syntax for dynamic property. But you have mixed two approaches here Simple Form approach vs Reactive Form approach. If you want to work with FormGroup I think it will be better to use FormControlName directives instead of the ngModel. Or if you want to use ngModel I think you don't need to use FormGroup with it.

edited Sep 29, 2017 at 3:33

answered Sep 29, 2017 at 3:22

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Optiq Over a year ago

Ultimately I'm just trying to wrap my head around a successful way to apply angular forms to a questionnaire component I made which you can see a sample of here plnkr.co/edit/nBpriDOgC88Fo2WMpM6A?p=preview What's challenging to me is everything I see on Angular Forms is about working with a hard coded form and iterating from there. If you look at how my plunkr works and has multiple optional tiers of questions available based on what answers the user selects you'll see why I want to be able to dynamically create it on the fly vs. trying to define one massive thing that will.....

Optiq Over a year ago

only be maybe 60% completed because there will never be a circumstance where all the questions apply to a user because it's basically my way of leading them down the path they need to follow for me to help them in the manner that suits them. So as a result I'm simply trying to discover which one provides an effective means of collecting their responses. Due to the logic I have in place there's a lot of "non-form" data that needs to be passed along with the "form data", if that makes any sense.

Collectives™ on Stack Overflow

How can I bind 2 variables inside 1 property binding in angular 2?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related