Complex object dynamic form creation with Angular Reactive Forms - arrays

Question

I have a products object as mentioned below from which I have to create a complex form
component.ts
import { Component, OnInit } from "#angular/core";
import { FormBuilder, FormGroup, FormArray, Validators } from "#angular/forms";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
products = [
{
Id: 1,
Name: "productA",
referralCode: "codeA",
webUrl: "https://productA.com",
allowReferralCode: true
},
{
Id: 2,
Name: "productb",
referralCode: null,
webUrl: "https://productb.com",
allowReferralCode: true
},
{
Id: 3,
Name: "productC",
referralCode: null,
webUrl: "https://productC.com",
allowReferralCode: false
}
];
productForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.productForm = this.fb.group({
products: new FormArray([])
});
this.products.forEach(item => {
if (item.referralCode !== null && item.allowReferralCode) {
this.t.push(
this.fb.group({
productId: [""],
referralCode: [""],
link: [""]
})
);
} else if (item.allowReferralCode) {
this.t.push(
this.fb.group({
productId: [""],
referralCode: [""]
})
);
} else if (!item.allowReferralCode) {
this.t.push(
this.fb.group({
productId: [""],
link: [""]
})
);
}
});
}
get f() {
return this.productForm.controls;
}
get t() {
return this.f.products as FormArray;
}
get productsFormGroups() {
return this.t.controls as FormGroup[];
}
onSubmit(form) {
alert(
"SUCCESS!! :-)\n\n" + JSON.stringify(this.productForm.value, null, 4)
);
}
}
Below is the HTML:
component.html
<form [formGroup]="productForm" (submit)="onSubmit(productForm)">
<div *ngFor="let product of products">
<div
*ngIf="product.referralCode !== null && product.allowReferralCode; else showWithReferalCode"
>
<div class="card ml-3 mt-3 mb-3" style="width: 18rem;">
<h4 class="mb-0 ml-3">{{product.Name | titlecase}}</h4>
<div class="card-body">
<div class="new-custom-radio ml-2 mb-3">
<div class="custom-control custom-radio">
<input
type="radio"
id="customRadio1"
name="customRadio"
class="custom-control-input"
/>
<label class="custom-control-label" for="customRadio1"
>I have a Referral Code</label
>
</div>
<div class="referral-code-input">
<input type="text" class="form-control form-control-lg" />
</div>
</div>
<div class="new-custom-radio ml-2 mb-3">
<div class="custom-control custom-radio">
<input
type="radio"
id="customRadio2"
name="customRadio"
class="custom-control-input"
/>
<label class="custom-control-label" for="customRadio2"
>I have a Custom Web Link</label
>
</div>
<div class="referral-code-input">
<input type="text" class="form-control form-control-lg" />
</div>
</div>
</div>
</div>
</div>
<ng-template #showWithReferalCode>
<div *ngIf="product.allowReferralCode; else showWebUrl">
<div class="card ml-3 mt-3 mb-3" style="width: 18rem;">
<h4 class="mb-0 ml-3">{{product.Name | titlecase}}</h4>
<div class="m-3 form-group">
<label for="exampleInputEmail1">I have Referral code</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
</div>
</div>
</div>
<ng-template #showWebUrl>
<div class="card ml-3 mt-3 mb-3" style="width: 18rem;">
<h4 class="mb-0 ml-3">{{product.Name | titlecase}}</h4>
<div class="m-3 form-group">
<label for="exampleInputEmail1">I have WebUrl</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
</div>
</div>
</ng-template>
</ng-template>
</div>
<div class="mt-2 mb-4 text-center">
<button class="btn btn-primary">Save</button>
</div>
</form>
I want to create a dynamic form for some conditions as shown in the screenshot below.
Now let me break it down whenever I have a referral code and allowReferralCode=true within my product I need to allow users to choose either referral code or custom code. At the same time if any product doesn't have a referral code and allowReferralCode=true then they will have to ask for a referral code and also if allowReferralCode=false then enter a direct URL.
I'm trying to build a dynamic form with form builder and FormArrays and it seems like as I have conditions in my HTML I'm unable to set form controls of the FormArray to form.
Below is the stack blitz version of the same.
stackblitz code
Whenever I'm trying to form control name to the inputs I'm getting this kind of error
**ERROR Error: Cannot find control with name: 'referralCode'**
Any help would be greatly appreciated.
Thanks in advance.