How to manage nested formGroup in Angular? - angular8

Question

I have created a dynamic form using formGroup and formArray, and need to get repItems inside the repForm in HTML, but got the following error:
ERROR TypeError: Cannot read property 'get' of undefined
at Object.eval [as updateDirectives]
How to resolve it without using formBuilder?
My code:
ngOnInit() {
this.quizForm = new FormGroup({
items: new FormArray([new FormGroup({
question: new FormControl('',Validators.required),
repOne: new FormControl(''),
repForm: new FormGroup({
repItems:new FormArray([new FormGroup({
rep: new FormControl('',Validators.required)
})])
})
})])
})
}
<form [formGroup]="quizForm" #formDir="ngForm">
<div formArrayName="items" *ngFor="let item of quizForm.get('items').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group">
<label for="question">Question</label>
<input id="question" class="form-control" formControlName="question">
</div>
<div formGroupName="repForm">
<div formArrayName="repItems"
*ngFor="let repItem of repForm.get('repItems').controls; let r = repIndex;">
<div [formGroupName]="r">
<div class="form-group">
<label for="rep">Response</label>
<input id="rep" class="form-control"
formControlName="rep">
</div>
<button type="submit" class="btn btn-default"
(click)='removeRepItem(r)'>RemoveForm</button>
<button type="submit" class="btn btn-default" (click)='addRepItem()'>addForm</button>
</div>
</div>
</div>
<button type="submit" class="btn btn-default" (click)='removeItem(i)'>RemoveForm</button>
</div>
</div>
</form>