[td-dynamic-forms] [Question] [Usage example] - How do you retrieve data from dynamic form?

Hey,

Could someone give me an idea how to properly retrieve data from <td-dynamic-forms> component?

What I tried so far is using a @ViewChild to get FormGroup:

  @ViewChild(TdDynamicFormsComponent) form: TdDynamicFormsComponent;

and then I was subscribing to valueChanges.

  ngAfterViewInit() {
    this.form.form.valueChanges.subscribe( (val) => {
      this.change.emit(val);
    });
  }

it works, until I change the property [elements] to different value: <td-dynamic-forms [elements]="newArrayOfElements"> </td-dynamic-forms>

then I get an error: There is no FormControl instance attached to form control element with name: xxx

Any suggestions on that?

[natejgardner]

I got some support over email that solved my problem. Here’s the code that’s needed:

<td-dynamic-forms #myForm></td-dynamic-forms>

@ViewChild('myForm')
_myForm: TdDynamicFormsComponent

printFormData() {
    console.log(this._myForm.value);
    }

It would be helpful in the docs if the code could be extended with something like this:

form: ITDynamicElementConfig[] = [{
    name: "inputField",
    type: TdDynamicElement.Input,
    label: "Input Field",
    required: true
}]

@ViewChild('myForm')
_myForm: TdDynamicFormsComponent

currentValue: string;

submit() {
    if(this._myForm) {
    let this.currentValue = this._myForm.value.inputField;
    }}

<td-dynamic-forms [elements]="form" #myForm></td-dynamic-forms>
<button (click)='submit()'>SUBMIT</button>
<h3>Your inputField value is:</h3> {{this.currentValue}}

This way developers can easily see the intended way of accessing data in the documentation. Right now, there’s a submit button but it’s not hooked up to anything. The creation of forms is intuitive, but accessing them isn’t very straightforward at all.

[jayjieh]

<ng-template let-param ngFor [ngForOf]=“params”>
<td-dynamic-forms [elements]=“param.elements” #paramform> <ng-template let-element ngFor [ngForOf]=“param.elements”> <ng-template let-control=“control” [tdDynamicFormsError]=“element.name”> <span *ngIf=“control.touched || !control.pristine”> <span *ngIf=“control.hasError(‘required’)”>Required</span> <span *ngIf=“control.hasError(‘min’)”>Min value: {{element.min}}</span> <span *ngIf=“control.hasError(‘max’)”>Max value: {{element.max}}</span> <span *ngIf=“control.hasError(‘minlength’)”>Min length value: {{element.minLength}}</span> <span *ngIf=“control.hasError(‘maxlength’)”>Max length value: {{element.minLength}}</span> </span> </ng-template> </ng-template> </td-dynamic-forms> </ng-template>

how do I get the form values from the multiple forms generated, Now I can only get the first form’s value only. I want to get even if they are 10 forms dynamically generated