I have 2 step stepper, I want to filter my amountArray based on the age of the person. if person is more than 50, only show value of 10000, 15000. for euro only 25000 and 50000. i tried getting value from it and referencing it to my amountArray but it gives me undefiened here is 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);
  }

CodePudding user response：

Hi I've forked your Stackblitz here

I've added an initialization for the value of dollars and euro. A blank object where I can push the values depending on the age.

public amountArrayList = [
    {
      forFiftyUp: true,
      dollar: 10000,
      euro: 25000,
    },
    {
      forFiftyUp: true,
      dollar: 15000,
      euro: 50000,
    },
    {
      forFiftyUp: false,
      dollar: 20000,
      euro: 75000,
    },
    {
      forFiftyUp: false,
      dollar: 25000,
      euro: 100000,
    },
];
public amountArray = [];

then the function to push values in amountArray depending on the age

next() {
    this.personAge = (this.formGroup.get('formArray') as FormArray)
      .at(0)
      .get('birthDate').value;
    if (0 <= this.personAge && this.personAge <= 50) {
      this.amountArray = this.amountArrayList;
    } else {
      this.amountArray = this.amountArrayList.reduce(function ( filtered, option ) {
        if (option.forFiftyUp) {
          var someNewValue = { dollar: option.dollar, euro: option.euro };
          filtered.push(someNewValue);
        }
        return filtered;
      },
      []);
    }
    console.log(this.amountArray);
}

CodePudding user response：

I added an isOlder propriety as true to the value you want to show and false to the value you don't want to show in a certain condition

dollar() {
    this.currencySymbol = '$';
    (this.formGroup.get('formArray') as FormArray)
      .at(1)
      .get('amount')
      .setValue('10000');
    this.amountArray = [
      {
        value: 10000,
        isOlder: true,
      },
      {
        value: 15000,
        isOlder: true,
      },
      {
        value: 20000,
        isOlder: false,
      },
      {
        value: 25000,
        isOlder: false,
      },
    ];
  }

and for the euro function

euro() {
    this.currencySymbol = '€';
    (this.formGroup.get('formArray') as FormArray)
      .at(1)
      .get('amount')
      .setValue('25000');
    this.amountArray = [
      {
        value: 25000,
        isOlder: true,
      },
      {
        value: 50000,
        isOlder: true,
      },
      {
        value: 75000,
        isOlder: false,
      },
      {
        value: 100000,
        isOlder: false,
      },
    ];
  }

in the amount-div i added ngIf like :

<div *ngIf="personAge < 50 || a.isOlder" 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>

you can see the whole code in THE STACKBLITZ here hope this help you Here