I created the following angular template:
<section class="section">
<div class="container">
<form [formGroup]="testForm">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Test Array</h1>
<div formArrayName="salestest" *ngFor="let sale of salestest.controls; let i=index">
<div [formGroupName]="i">
<div class="field">
<label class="label">Test Sale1</label>
<div class="control">
<input class="input" type="text" placeholder="Sales" formControlName="sales">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
This is the associated Component:
export class SalesTestComponent implements OnInit {
testForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.testForm = this.fb.group({
salestest: this.fb.array([this.buildSalesTest()])
});
console.log("ngOnint was called");
}
buildSalesTest(): FormGroup {
return this.fb.group({
sales: ""
});
}
get salestest(): FormArray {
return <FormArray>this.testForm.get("salestest");
}
}
Upon running the Angular application, an error is displayed:
ERROR TypeError: Cannot read property 'value' of undefined
The error seems to point to line 3 in the template:
<form [formGroup]="testForm">
It is unclear why Angular is encountering this 'Cannot read property of undefined' error.
The complete error message states:
ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as updateRenderer] (CreateSalesTestComponent.html:23)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:23838)
at checkAndUpdateView (core.js:23213)
at callViewAction (core.js:23449)
at execComponentViewsAction (core.js:23391)
at checkAndUpdateView (core.js:23214)
at callViewAction (core.js:23449)
at execEmbeddedViewsAction (core.js:23412)
at checkAndUpdateView (core.js:23209)
at callViewAction (core.js:23449)
The line referenced in the error is line 23:
ngOnInit() {
this.testForm = this.fb.group({
salestest: this.fb.array([this.buildSalesTest()])
}); <!-- **Line 23** -->
console.log("ngOnint was called");
}