Блог

Я создал реактивную форму в angular с тремя редактируемыми элементами управления формой. HTML-код:

   <table class="table-details">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Carbohydrates</th>
      <th>Fats</th>
      <th>Protein</th>
      <th>Calories</th>
      <th style="padding-left: 4rem">Status</th>
      <th>Action</th>
    </tr>
    <tr *ngFor="let food of foods; index as index">
      <td>{{ food.id }}</td>
      <td>
        <editable class="name" (update)="updateField(index, 'name')">
          <ng-template appViewMode>
            {{food.name}}
            <mat-icon>edit</mat-icon>
          </ng-template>
          <ng-template appEditMode>
            <input [formControl]="getControl(index, 'name')" focusable>
          </ng-template>
        </editable>
      </td>
      <td>
        <editable class="carbohydrates" (update)="updateField(index, 'carbohydrates')">
          <ng-template appViewMode>
            {{food.carbohydrates}} gms
            <mat-icon>edit</mat-icon>
          </ng-template>
          <ng-template appEditMode>
            <input [formControl]="getControl(index, 'carbohydrates')" focusable>
          </ng-template>
        </editable>
      </td>
      <td>
        <editable class="fats" (update)="updateField(index, 'fats')">
          <ng-template appViewMode>
            {{food.fats}} gms
            <mat-icon>edit</mat-icon>
          </ng-template>
          <ng-template appEditMode>
            <input [formControl]="getControl(index, 'fats')" focusable>
          </ng-template>
        </editable>
      </td>
      <td>
        <editable class="protein" (update)="updateField(index, 'protein')">
          <ng-template appViewMode>
            {{food.protein}}gms
            <mat-icon>edit</mat-icon>
          </ng-template>
          <ng-template appEditMode>
            <input [formControl]="getControl(index, 'protein')" focusable>
          </ng-template>
        </editable>
      </td>
      <td>
        <div>
          <p [formControl]="getCalories()">
            {{food.calories}} kcals
          </p>
        </div>
      </td>
      <td>
        <div class="boolean">
          <mat-icon>lens</mat-icon>
          Active
        </div>
      </td>
      <td>
        <div class="actions">
          <mat-icon>delete</mat-icon>
        </div>
      </td>
    </tr>
  </table>
 

Это код ts:

 export class FoodDetailsComponent implements OnInit {

  items!: FormArray

  foods:any = FOODDATAS;

  constructor(private fb : FormBuilder) {}

  ngOnInit(): void {
    const toGroup = this.foods.map((food:any) => {
      return new FormGroup({
        name: new FormControl(food.name,[
          Validators.required,
          Validators.pattern(/^[a-zA-Z]*$/)
        ]),
        carbohydrates: new FormControl(food.carbohydrates, [
          Validators.required,
          Validators.pattern(/^d (.d{1,2})?$/)
        ]),
        fats: new FormControl(food.fats, [
          Validators.required,
          Validators.pattern(/^d (.d{1,2})?$/)
        ]),
        protein: new FormControl(food.protein, [
          Validators.required,
          Validators.pattern(/^d (.d{1,2})?$/)
        ]),
        calories: new FormControl(food.calories, [
          Validators.required
        ])
      });
    });
    this.items = new FormArray(toGroup)

  }

  getCalories() : FormControl {
    const carbs:any = this.items.get('carbohydrates.2.inArray')
    const protein:any = this.items.get('protein.3.inArray')
    const fats:any = this.items.get('fats.2.inArray')
    return ((carbs * 4)   (protein * 4)   (fats * 9)) as unknown as FormControl
  }

  getControl(index: number, field: string): FormControl {
    return this.items.at(index).get(field) as FormControl;
  }

  updateField(index: number, field: string) {
    const control = this.getControl(index, field);
    if (control.valid) {
      this.foods = this.foods.map((e: any, i: number) => {
        if (index === i) {
          return {
            ...e,
            [field]: control.value
          };
        }
        return e;
      });
    }
  }
 

Значения «калорий», я хочу, чтобы они автоматически вычислялись на основе значений «углеводов», «белков» и «жиров», используя эту логику

 function getCalories(carbs:Double, protein:Double, fat:Double) {
   return carbs x 4   protein x 4   fats x 9
}
 

Я хочу, чтобы он отслеживал изменения трех других значений FormControl. Я пробовал использовать valueChanges , но он не работал с fromArray.(P. S-как получить доступ к значениям fromArray?)

Заранее спасибо

valueChanges не работает, потому что вы не обертываете директиву массива форм директивой родительской группы форм. Также я предлагаю не использовать так много функций шаблона, более простой способ доступа к элементам управления, позволяя formarray обрабатывать их для вас, пример ниже

 <!-- below is what you are missing, a parent form group-->
<table [formGroup]="formGroup">
  <tbody formArrayName="items">
      <tr 
      *ngFor="let item of formGroup.get('items').controls; let i = index;"> 
          <td [formGroupName]="i">
          <input formControlName="carbohydrates" placeholder="Item name">
          </td>
      </tr>
   </tbody>
</table>