am a student and developing a functional process UI which connects multiple databases in angular.

Am failed to render respective div's according to selected values from dropdown in formarray.(same dropdown we are using multiple formaray objects.)

Any idea please how to resolve this issue.

Here is the link for code.

https://stackblitz.com/edit/angular-ivy-ijn5xa?file=src/app/app.component.ts

enter image description here

CodePudding user response：

As you are sharing the selectedType for each employee FormGroup in employees FormArray, hence the HTML (Database part) will be displayed as the same based on the latest selectedType value.

To solve the issue, you have to display each HTML (Database part) based on the selected emptype value for each employee FormGroup.

component.ts

getEmployeeReplyType(empIndex: number): FormControl {
  let formGroup = this.employees().controls[empIndex] as FormGroup;
  return formGroup.controls['replytype'] as FormControl;
}

component.html

<div *ngIf="getEmployeeReplyType(empIndex).value == 'Oracle'" >
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'MySQL'" >
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'SQLServer'" >
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'MongoDB'" >
  ...
</div>

And next, you don't need the (change) event as the onChange function is not needed.

<select
  formControlName="replytype"
  
  type="text"
  style="width: 20%;"
  >
  ...
</select>

Sample Solution on STackBlitz