javascript - How to solve Angular FormArray and mat-select options linked to input fields?

Question

I have a scenario where the user can open mat-select and choose an option from the dropdown. Upon his selection a hidden form will be displayed for him to fill it. Everything was okay with static (one) template. Now, we decided to make the mat-select and the corresponding templates linked to the options inside Angular formArray. I have two problems that I am facing right now: 1- All mat-selects in all the generated forms listen to the same event (user selected option. That is to say, when you change mat-select in index 0 of the formArray the mat-select in index 1 react to your changes. 2- All the generated forms appear with the template linked to the option that the user chose from the 1st selection (index 0 in the formArray).

There are no syntax errors.

I guess the problem stemming from a global variable that I defined to decide to display one of the forms or not: (isPremiumAmountSelected in code below). I do not like to split my component to use @Input and @Output. I need a solution that builds upon what is shared below. (There are many related stuff depends on this).

isPremiumAmountSelected: boolean = false; 
  FixedProductPrice: Boolean = undefined; 
  OneFactorPricingCarValue: Boolean = undefined; 
  MultiFactorPricingCarValueCarModel: Boolean = undefined;

  ToggledPremiumAmountTypeDropDownOptions(data){
    this.isPremiumAmountSelected = true; 
    if(Object.is(data.value, 1)){
      this.FixedProductPrice = true; 
      this.OneFactorPricingCarValue = false; 
      this.MultiFactorPricingCarValueCarModel = false; 
    }if(Object.is(data.value, 2)){
      this.OneFactorPricingCarValue = true; 
      this.FixedProductPrice = false; 
      this.MultiFactorPricingCarValueCarModel = false;
    }if(Object.is(data.value, 3)){
      this.MultiFactorPricingCarValueCarModel = true; 
      this.FixedProductPrice = false; 
      this.OneFactorPricingCarValue = false;
    }
  }

<div formArrayName="formArray" *ngFor="loop goes here; let i = index">
    <div [formGroupName]="i">
    <mat-form-field appearance="outline" *ngIf="options">
        <mat-label>Available Types</mat-label>
        <mat-select 
        (ngModel)="selectedPremiumAmountOptionValue" 
        (onSelectionChange)="ToggledPremiumAmountTypeDropDownOptions($event)"
        formControlName="control">
            <mat-option *ngFor="let option of options"
            (click)="ToggledPremiumAmountTypeDropDownOptions(option)" 
            [value]="option?.value">
            {{option?.viewValue}}
            </mat-option>
        </mat-select>                  
        </mat-form-field>
     <span *ngIf="isPremiumAmountSelected">
            <div *ngIf="FixedProductPrice"> Template 1 goes here</div>
            <div *ngIf="OneFactorPricingCarValue"> Template 2 goes here</div>
            <div *ngIf="MultiFactorPricingCarValueCarModel"> Template 3 goes here</div>
     </span>
    </div>
</div>

question from:https://stackoverflow.com/questions/65861501/how-to-solve-angular-formarray-and-mat-select-options-linked-to-input-fields

Answer 1

In general to mannage a FormArray of FormGroups that belong to a FormGroup you has a getter to get the formArray

get myFormArray()
{
     return this.myForm.get('myFormArray') as FormArray
}

<form [formGroup]="myFormGroup">
  <!--use formArrayNem-->
  <div formArrayName="myFormArray">
      <!--see that we use the "getter" before and iterate over "controls"-->
      <!--see the [formGroupName]="i" IN the own loop-->
      <div *ngFor="let group of myFormArray.controls;let i=index"
              [formGroupName]="i">
            <!--here you use formControlName to input the control, e.g.-->
            <input formControlName="control">

            <!--to know the value of control you can use, e.g.-->
            <div *ngIf="formArray.value[i].control==2">is two</div>
             <!-- or -->
            <div *ngIf="formArray.at(i).value.control==2">is two</div>
             <!-- or -->
            <div *ngIf="formArray.at(i).get('control').value==2">is two</div>
      </div>
  </div>
</form>

You needn't use three variables to know is if fixedProduction, onFactor or multipleFactor. If you want to use three variables, you need use tre arrays, but you can see that is unnecesary also is unnecesary the (onSelectionChange) event.

NOTE: You're using (ngModel)' -not exist (ngModel)- if you want to say [ngModel]` remember that if you're using FormArrays or FormControl, you should NOT use ngModel-,

NOTE2: In my answer I use some like

form=new FormGroup({
    formArray:new FormArray([this.getGroup(),this.getGroup()])
  })
  get formArray()
  {
    return this.form.get('formArray') as FormArray
  }
  getGroup()
  {
    return new FormGroup({
      control:new FormControl(),
      fixedPrice:new FormControl(),
      oneFactor:new FormControl(),
    })
  }

I don't know what are you using