2

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?

Optiq
  • 2,835
  • 4
  • 33
  • 68

1 Answers1

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.

Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • 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 https://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 Sep 29 '17 at 03:46
  • 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. – Optiq Sep 29 '17 at 03:47