Question

我有一张现金流量表。每个CashFlow都有可变数量的期间。当我单击现金流量时，我正在尝试填充组件，以便可以编辑期间值。现金流量名称和开始/结束日期正在填充。我有一系列的句点，每个文本都有显示的文本框。

我无法在文本框中显示初始值。
我正在尝试使patchValue或setValue正常工作。

我仔细审查了SO建议的12个问题。一个人给了我一个尝试的想法，但最终并没有解决我的问题。

这是cashFlowDetailComponent.ts

 import { Component, OnInit , Input, Output, ElementRef} from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import {cashFlow, cashFlowPeriod} from '../cashflow'
import { IMyDpOptions, IMyDateModel, IMyDate } from 'mydatepicker';


@Component({
  selector: 'app-cashflow-detail',
  templateUrl: './cashflow-detail.component.html',
  styleUrls: ['./cashflow-detail.component.css']
})
export class CashflowDetailComponent implements OnInit {



  myFormGroup: FormGroup;
  myCashFlow: cashFlow;


  constructor(private fb: FormBuilder) { 

   }

    //called by parent component when cashFlow is clicked.
  buildForm(cf_: cashFlow): void {
    //return;
    this.myFormGroup = null;
    this.myCashFlow = cf_;
    if (cf_ == null) { return;}
    const a :FormArray = this.fb.array([]); 



    this.myCashFlow.periods.forEach(cfp => {

      a.push(this.cfpGroup(cfp));
    })

     //set up the form w/ header controls, add in the periods array
    this.myFormGroup = this.fb.group({
      cashFlowName: this.myCashFlow.cashFlowName,
      startDate: this.threePartDateFromDate( this.myCashFlow.startDate),
      endDate: this.threePartDateFromDate( this.myCashFlow.endDate),
      periods:a
    });



       this.myFormGroup.controls['periods'].controls[i].controls['value1'].setValue(this.myCashFlow.periods[i].value1);
    //}



  }//end of buildform

  //return a simple FormGroup , this will cause 'periods' to be an FormArray of FormGroups,  each w/ 1 control
  cfpGroup(cfp_ : cashFlowPeriod) :FormGroup{
    const g : FormGroup = this.fb.group({
      value1: cfp_.value1
    });
    //  g.patchValue(cfp_);   //suggested in one of the related SO questions. No Joy.
    return g;
  }


  //needed to patch the myDatePicker. It works, it may not be pretty or efficient... 
  threePartDateFromDate(d_: string): any {
    const date_ = new Date(d_);

    return {
      date: {
        year: date_.getFullYear(),
        month: date_.getMonth()+1,
        day: date_.getDate()}
    }

  }
}

这是我的模板

    <div *ngIf="myCashFlow && myFormGroup" [formGroup]="myFormGroup">

      <table style="margin:7px 7px 7px 7px">
            <tr>
          <td class="fieldLabel">Cash Flow Name</td>
          <td>
            <input type="text"
                   formControlName="cashFlowName"
                   style="width:175px;" />
          </td>
        </tr>


      </table>




   <table border="1">
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods,let i=index">{{cfp.periodName}}</td>
    </tr>
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods, let i=index" style="padding:7px;">
        <input type="text"
               [id]="cfp.periodName"
               style="width:35px;" />
      </td>
    </tr>
  </table>

</div>

Answer 1

谢谢萨克斯姆（Saksham）建议我把它放在stackblitz中
似乎每天都在学习新技能

请在这里找到。 https://stackblitz.com/edit/angular-qcjxri

通过使用vic rubba的本示例仔细比较了stackblitz代码，我能够确定问题所在 https://dev.to/crazedvic/using-patchvalue-on-formarrays-in-angular-7-2c8c

封装ngFOR的我需要formArrayName="periods"没有括号
我需要一个[formGroupName]="periodIndex"，它是for的索引。如果有人可以解释，id会很感激。那是魔术的最后一块。
所需的formControlName="value1"没有括号

在过去的两天里，我阅读了许多有关FormGroup和FormArray和patchValue的文章。不知何故，第2点和第3点已引起我的注意。我有兴趣返回并再次阅读这些文章。

我希望这对某人有帮助。

整个HTML模板都在stackBlitz上，但是我将其张贴在这里，以便您可以看到上下文中我的3点在哪里。

  <table border="1">
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods,let i=index">{{cfp.periodName}}</td>
    </tr>
    <tr  formArrayName="periods">
      <td *ngFor="let item of myFormGroup.get('periods').controls, let periodIndex=index"
          style="padding:7px;"
          [formGroupName]="periodIndex">
        <input type="text"
               formControlName="value1"
               style="width:35px;" />
      </td>
    </tr>
  </table>

patchValue现在可以初始化FormArray值

1 个答案: