Getting issue in registering contorl with form in Angular Reactive forms

Question

I am working on Angular Reactive forms. Initially I have an formarray in formgroup. afterwards I push formgroup into formarray to add form control dynamically. I am getting an issue when binding these control using formControlName. I am getting this Error: Cannot find control with path: 'controlArray -> 0 -> value'

here is my component class code:

ngOnInit(){
        this.reviewForm = this.fb.group({            
            'controlArray': new FormArray([])
        });        
        this.showDefaultForm();                     
    }

First I am getting data in formsDb, then I am searching into it to get the last set default form.

showDefaultForm(){
        for(let form of this.formService.formsDb){
            if(form.formName==this.formService.defaultForm.formName){
                this.selectedForm = form;
                this.addForm();
            }
        }     
    }


addForm(){            
        for (let control of this.selectedForm.controlsArr){                              
            (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group([{
                controlType: control.controlType,
                label: control.label,               
                value: ''
            }])); 
        }        
    }

Here is my template code:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>               
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <div [formGroupName]="i">
          <table>
            <tr>
              <span *ngIf="control.value">
                  <td> 
                    <label>{{control.value.label}}</label> 

              </td>
              <td><span *ngIf="control.value.controlType == 'select'">                
                    <md-select placeholder="{{control.value.label}}" formControlName="value">
                      <md-option *ngFor="let option of control.value.options; let j=index" 
                      [value]="option">{{control.value.options[j]}}</md-option>                  
                    </md-select>
                  </span></td>
              <td> <span *ngIf="control.value.controlType == 'text'">
            <md-form-field class="example-full-width">
              <input mdInput type="text" placeholder="{{control.value.placeholder}}" formControlName="value" >
            </md-form-field>  
        </span></td>                           
              </span>
            </tr>
          </table>
        </div>
      </div>      
    </div>
    </span>
  </div>
</form>

Is there some issue in my template code, Please help. Thanks

it has form data i.e. form name and form controls. Its class is: export class FormData{ constructor(public formName:String, public controlsArr:Control[]){} } — Waleed Shahzaib
– Waleed Shahzaib, Commented Dec 11, 2017 at 14:18

Pramod Patil · Accepted Answer · 2017-12-11 14:25:05Z

0

Change this below condition with dynamic value. Since the information given by you is minimal. Lets try this below and check whether issue is getting resolved or not.

{{control.value[i].controlType}}

answered Dec 11, 2017 at 14:25

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

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

6 Comments

Waleed Shahzaib Over a year ago

Please tell where to add this line?

Pramod Patil Over a year ago

Check HTML page. You have defined this

Waleed Shahzaib Over a year ago

I just added the line {{control.value[0].controlType}} to check whether data is coming into template, its not a condition.

Pramod Patil Over a year ago

Did you replace [0] with [i]?

Waleed Shahzaib Over a year ago

yes, tried this also. I think issue is in formControlName binding, the error says: Cannot find control with path: 'controlArray -> 0 -> value', here value is the controlName which I am assigning to formControlName.

|

theykillimmortal · Accepted Answer · 2017-12-11 18:35:24Z

0

I think the problem is in this line

<div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">

Please, change it on

<div *ngFor="let control of reviewForm.controls.controlArray.controls; let i = index">

And than you can work with values: reviewForm.controls.controlArray.controls[i].controlType or using formControlName.

Sorry If I understood your problem wrong. I suppose this article will be helpful for you. https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

answered Dec 11, 2017 at 18:35

theykillimmortal

1491 silver badge6 bronze badges

1 Comment

Waleed Shahzaib Over a year ago

Both approaches are fine. Anyways thanks for your feedback.

chinaski · Accepted Answer · 2018-06-27 13:47:50Z

0

i think the problem is in the addForm function, when you push the group, you no need create it with brackets as an array, something like that:

   addForm(){
      for (let control of this.selectedForm.controlsArr) {
        (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({
          controlType: control.controlType,
          label: control.label,
          value: ''
        }));
      }
    }

answered Jun 27, 2018 at 13:47

chinaski

1261 silver badge7 bronze badges

Collectives™ on Stack Overflow

Getting issue in registering contorl with form in Angular Reactive forms

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related