CODEWITHSUNDEEP
angularformsparent-child
MatDepInfo
MatDepInfo

Reputation: 337

FormControlName in child component

I have this FormGroup:

{
  "action.281": {
    "section.267": {
      "loop.1": {
        "default": {
          "form.885": []
        }
      },
      "loop.2": {
        "default": {
          "form.885": []
        }
      }
    },
    "section.275": {
      "loop.1": {
        "default": {
          "form.891": ""
        }
      }
    },
    "section.276": {
      "loop.1": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
      "loop.2": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
    }
  }
}

And I want to use it from several components (parent and child components). This is my parent html component :

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
      <div *ngFor="let section of sections">
        <app-section [section]="section" [action]="action"></app-section>
      </div>
  </div>
</div>

And my child html component :

<div class="app-section">
<fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
              <div *ngFor="let question of loop.questions" class="form-group">
                <input class="form-control" [formControlName]="'form.' + question.id" />
              </div>
            </div>
          </fieldset>
       </fieldset>
</div>

But I got the error "ERROR Error: Cannot find control with name: 'section.267'" and so on. How can I use child component to link parent FormGroup and Parent FormGroupName ?

Upvotes: 0

Views: 992

Answers (1)

kremerd
kremerd

Reputation: 1636

You cannot do this implicitly. But you can explicitly pass down the form group (or its relevant children) and use it as an input parameter of the child component:

Parent:

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
        <div *ngFor="let section of sections">
            <app-section [section]="section" [action]="action"
                         [actionForm]="objectForm.controls['action.' + action.id]">
            </app-section>
        </div>
    </div>
</div>

Child:

<div class="app-section" [formGroup]="actionForm">
    <fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
                <div *ngFor="let question of loop.questions" class="form-group">
                    <input class="form-control" [formControlName]="'form.' + question.id" />
                </div>
            </div>
        </fieldset>
    </fieldset>
</div>

That's just one additional attribute per template - and you need to declare the actionForm as an @Input parameter of the child component. At first, this extra declaration might seem redundant or unnecessary. But it is necessary to ensure that the child component is self-contained and provides a well defined interface. (Since it depends on it, part of the components interface is the form anyways. It only makes sense to make that dependency explicit.)

Upvotes: 1

Related Questions