Как показать запятую в отключенном поле ввода, которое принадлежит formArray?

Question

Мы использовали этот метод для отображения суммы / цифры с запятой, сохраненной из БД в отключенном текстовом поле.

Это. html:

<input matInput type="text" formControlName="test" [value]="type.get('test').value | number : '1.2-2'">

и это это .ts:

this.type.controls['test'].setValue('1000000');

, поэтому результат будет: 1,000,000

Но моя проблема сейчас в том, что у меня есть отключенное текстовое поле внутри formArray, и я не смог получить метод для работать для этого текстового поля.

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);

и мой вывод: 1000000

Надеюсь, я мог бы получить какую-то помощь, спасибо!

PS Вот пример StackBlitz

Answer 1

Попробуйте установить директиву входного значения на [value]="section.value.field1 | number: '1.2-2'". Удачи!

Answer 2

у вас есть проблема с получением контрольной ссылки здесь ('program_funding_needs[i]'), может быть решена следующим образом: 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 ?

но, поскольку вы уже получил ссылку на форму группы по переменной 'section', к которой можно получить доступ вот так

 <input 
      type="text" 
      formControlName="field1"
      [value]="section.get('field1').value | number: '1.2-2'"
    >