CODEWITHSUNDEEP
angular
FNads
FNads

Reputation: 59

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

Upvotes: 1

Views: 170

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

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'"
    >

Upvotes: 1

alexako
alexako

Reputation: 122

Try setting the input value directive to [value]="section.value.field1 | number: '1.2-2'". Good luck!

Upvotes: 1

Related Questions