Tukukkk

I am new to Angular and trying to achieve dynamic/multi-dimensional arrays in angular. I am attaching the code below:

app.component.ts code:

import { Component, OnInit, Input } from '@angular/core';

import { FormBuilder, FormArray, FormGroup, AbstractControl }  from '@angular/forms';



@Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

    styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

    title = 'gmr';

    phaseForm: FormGroup;



    constructor(private _fb: FormBuilder) {

        console.log(1);

    }



    ngOnInit() {

        console.log("In ngonit");

        this.phaseForm = this._fb.group({

          userName: [''],

          phaseExecutions: this._fb.group({

            PRE: this._fb.array([this.addPhase()])

          }) 

        });

        console.log(this.phaseForm);

    }



    addPhase() {

        console.log(22);

        return this._fb.group({

          phaseType: [''],

          phaseValue: ['']

        });

    }



    get phaseArray() {     

        const control = <FormArray>this.phaseForm.get('phaseExecutions')['controls'].get('PRE');

        console.log("value "+control);

        return control;

    }



    addMorePhase() {

        this.phaseArray.push(this.addPhase());

    }



    onSubmit(){

        console.log(this.phaseForm.value);

    }

}

Here is the code for app.component.html

<form [formGroup]="phaseForm" novalidate">    

    <input formControlName="userName" type="text" class="form-control">

    <h2>Add the phases</h2>    

    PRE Phase:

    <button type="button" class="btn btn-secondary btn-sm" (click)="addMorePhase()">Add Pre-Phase</button>  

    <div class="row" formArrayName="PRE">

        <div class="col-12" *ngFor="let phase of phaseArray.controls; let i = index;" [formGroupName]="i">

            <div>

                <label class="col-sm-3">Phase type:</label>

                <input class="col-sm-3" type="text" class="form-control" formControlName="phaseType">

                <label class="col-sm-3">Phase value:</label>

                <input class="col-sm-3" type="text" class="form-control" formControlName="phaseValue">

            </div>

        </div>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

</form>

Basically i want to add PRE phaseexecution dynamically and to start with already adding one PRE phaseexecution.

If i am trying to run this code i am getting the below error:

 AppComponent.html:2 ERROR Error: Cannot find control with name: 'PRE'

    at _throwError (forms.js:1775)

    at setUpFormContainer (forms.js:1757)

    at     FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addFormArray (forms.js:4548)

    at FormArrayName.push../node_modules/@angular/forms/fesm5/forms.js.FormArrayName.ngOnInit (forms.js:4762)

    at checkAndUpdateDirectiveInline (core.js:9243)

    at checkAndUpdateNodeInline (core.js:10507)

    at checkAndUpdateNode (core.js:10469)

    at debugCheckAndUpdateNode (core.js:11102)

    at debugCheckDirectivesFn (core.js:11062)

    at Object.eval [as updateDirectives] (AppComponent.html:6)

    View_AppComponent_0 @ AppComponent.html:2

    proxyClass @ compiler.js:10173

    push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

    push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719

    (anonymous) @ core.js:4578

    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

    push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

    push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

    push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

      push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4605

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @   core.js:4547

    (anonymous) @ core.js:4350

push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap  @ core.js:4350

(anonymous) @ core.js:4316

    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387  

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

(anonymous) @ zone.js:872

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421

onInvokeTask @ core.js:3811

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188

drainMicroTaskQueue @ zone.js:595

Promise.then (async)

scheduleMicroTask @ zone.js:578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252

scheduleResolveOrReject @ zone.js:862

ZoneAwarePromise.then @ zone.js:962

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

AppComponent.html:2 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 8, nodeDef: {…}, elDef: {…}, elView: {…}}

View_AppComponent_0 @ AppComponent.html:2

proxyClass @ compiler.js:10173

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1724

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4605

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4547

(anonymous) @ core.js:4350

push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4350

(anonymous) @ core.js:4316

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

(anonymous) @ zone.js:872

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421

onInvokeTask @ core.js:3811

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188

drainMicroTaskQueue @ zone.js:595

Promise.then (async)

scheduleMicroTask @ zone.js:578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252

scheduleResolveOrReject @ zone.js:862

ZoneAwarePromise.then @ zone.js:962

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

core.js:3121 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

AppComponent.html:6 ERROR TypeError: this.phaseForm.get(...).controls.get is not a function

    at AppComponent.get [as phaseArray] (app.component.ts:41)

    at Object.eval [as updateDirectives] (AppComponent.html:7)

    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)

    at checkAndUpdateView (core.js:10451)

    at callViewAction (core.js:10692)

    at execComponentViewsAction (core.js:10634)

    at checkAndUpdateView (core.js:10457)

    at callWithDebugContext (core.js:11344)

    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:11022)

    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:8838)

View_AppComponent_0 @ AppComponent.html:6

proxyClass @ compiler.js:10173

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

(anonymous) @ core.js:4462

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734

next @ core.js:4462

schedulerFn @ core.js:3551

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47

push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535

checkStable @ core.js:3789

onHasTask @ core.js:3833

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441

push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461

push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205

drainMicroTaskQueue @ zone.js:595

Promise.then (async)

scheduleMicroTask @ zone.js:578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252

scheduleResolveOrReject @ zone.js:862

ZoneAwarePromise.then @ zone.js:962

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

AppComponent.html:6 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 17, nodeDef: {…}, elDef: {…}, elView: {…}}

View_AppComponent_0 @ AppComponent.html:6

proxyClass @ compiler.js:10173

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1724

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

(anonymous) @ core.js:4462

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138

push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734

next @ core.js:4462

schedulerFn @ core.js:3551

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47

push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535

checkStable @ core.js:3789

onHasTask @ core.js:3833

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441

push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461

push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205

drainMicroTaskQueue @ zone.js:595

Promise.then (async)

scheduleMicroTask @ zone.js:578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252

scheduleResolveOrReject @ zone.js:862

ZoneAwarePromise.then @ zone.js:962

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

    (anonymous) @ main.js:1

Why it will fail at line number 2 as shown in the error. looks very strange to me.
Any inputs or directions will be great help.

Thanks in advance.
Rishu

You're using formArrayName without a parent formGroupName. Remember that PRE is a part of the phaseExecutions FormGroup. So you'll have to add a wrapping div with formGroupName="phaseExecutions" on it.

<form [formGroup]="phaseForm">

    <input formControlName="userName" type="text" class="form-control">

  <div formGroupName="phaseExecutions">

    <h2>Add the phases</h2>    

    PRE Phase:

    <button type="button" class="btn btn-secondary btn-sm" (click)="addMorePhase()">Add Pre-Phase</button>  

    <div class="row" formArrayName="PRE">

      <div class="col-12" *ngFor="let phase of phaseArray.controls; let i=index;" [formGroupName]="i">

        <div>

          <label class="col-sm-3">Phase type:</label>

          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseType">

          <label class="col-sm-3">Phase value:</label>

          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseValue">

        </div>

      </div>

    </div>

  </div>



  <button type="submit" class="btn btn-primary">Submit</button>

</form>

Here's a Working Sample StackBlitz for your ref.

<div class="row" formArrayName="PRE">

Should be

<div class="row" formArrayName="phaseForm.PRE">