I am working on a 2-step stepper feature where I need to filter the values in my amountArray based on the age of the person. If the person is above 50 years old, display only the values 10000 and 15000. For Euro currency, show values 25000 and 50000. I attempted to extract the value from it and assign it to my amountArray, but it keeps returning undefined. Here is the link to my StackBlitz
.html
<input
matInput
formControlName="birthDate"
type="text"
class="form-control age"
placeholder="ex: 25"
required/>
<ng-container *ngFor="let a of amountArray">
<div class="amount-div">
<input
type="radio"
id="{{ a.value }}"
formControlName="amount"
value="{{ a.value }}"/>
<label for="{{ a.value }}">
<span> {{ a.value }} </span>
<span>{{ currencySymbol }}</span>
</label>
</div>
</ng-container>
.ts
public amountArray = [
{
value: 10000,
},
{
value: 15000,
},
{
value: 20000,
},
{
value: 25000,
},
];
get value() {
return (this.formGroup.get('formArray') as FormArray).at(0).get('birthDate').value;
}
next() {
this.personAge = (this.formGroup.get('formArray') as FormArray).at(0).get('birthDate').value;
console.log(this.personAge);
}