Q:

How to show comma in a disabled input field that belongs to a formArray?

We used this method of showing an amount/figure with a comma saved from the db to a disabled textfield.
This is the .html:
<input matInput type="text" formControlName="test" [value]="type.get('test').value | number : '1.2-2'">

and this is the .ts:
this.type.controls['test'].setValue('1000000');

so the output would be: 1,000,000
But my problem now is I have a disabled textfield inside a formArray, and I couldn't get the method to work for this textfield.
my .html:
<mat-form-field class="example-full-width">
                                <input 
                                  matInput 
                                  placeholder="Total Program Funding Needs" 
                                  id="program_funding_needs" 
                                  name="program_funding_needs" 
                                  formControlName="program_funding_needs" 
                                  [value]="getAdvocaciesPrograms.get('program_funding_needs[i]')?.value | number : '1.2-2'" >
                              </mat-form-field>

my .ts:
const programDetails = <FormArray>this.type.controls['advocaciesPrograms'];
programDetails.controls[i].get('program_duration').setValue(program.duration);
programDetails.controls[i].get('program_location').setValue(program.location);
programDetails.controls[i].get('program_funding_needs').setValue(program.funding_needs);

and my output: 1000000
Hoping I could get some kind of help, thanks!
P.S
Here's a sample StackBlitz

A:

you have a problem of getting the control reference here ('program_funding_needs[i]'), can be solve like this e 
<div class="sections" formArrayName="sections" 
     *ngFor="let section of getSections.controls; let i = index;">
  <fieldset [formGroupName] = "i">
    <input 
      type="text" 
      formControlName="field1"
      [value]="getSections.controls[i].get('field1').value | number: '1.2-2'"
    >
      <button (click)="fetchAmount(i)">Show</button>
      <button (click)="removeSection(i)">Delete Section</button>
  </fieldset>

demo 
but becuase you already got the reference of the formgroup by 'section' variable can be access like this
 <input 
      type="text" 
      formControlName="field1"
      [value]="section.get('field1').value | number: '1.2-2'"
    >

