0

I have dynamically created a form array that contains five controls. I am subscribing to changes on the form array. One of the form controls is missing from the value changes return.

I have gone through my code to ensure that the missing control has the same setup as the ones that are appearing.

Dynamic creation code... First I make an API call...

this.userProfile.userEmployeeId.subscribe(
      dataEmployeeId => {
        this.employeeId = dataEmployeeId;
        /**
         * Observable to pull the employee timecards
         */
        this.employeeService.getEmployeeTimeCards(this.employeeId).subscribe(
          (datagetEmployeeTimeCards: ITimecard[]) => {
            datagetEmployeeTimeCards.forEach((elTimecard, index) => {
              // Populate form fields with timecard information
              if (elTimecard.timecardDets.length > 0) {
                elTimecard.timecardDets.forEach((elTimecardDets, i) => {
                  this.addWorkTracked(elTimecardDets);
                });
              }
            });
          },
          (err: any) => console.log(err)
        );
      },
      (err: any) => console.log(err)
    );

Call the method to create the dynamic controls based upon the API return

addWorkTracked(data?: ITimecardDet): void {
    this.timecardDets.push(this.buildWorkTracked(data));
  }

buildWorkTracked(data?: ITimecardDet): FormGroup {
return new FormGroup({
    payCategory: new FormControl(this.buildPayCategories()),
    shiftDifferential: new FormControl(
    this.buildShiftDifferentialCategories()
    ),
    overtimeCategory: new FormControl(this.buildOvertimeCategories()),
    hoursWorked: new FormControl('0:00'),
    earnings: new FormControl({ value: null, disabled: true }) // This is the missing control
});
}

Create observable code...

const timecardDetsChanges = this.timecardForm.controls['timecardDets'].valueChanges;
timecardDetsChanges.subscribe(
    value =>
        value.forEach(element => {
            // All form controls appear except for the earnings control
        })
    );

Here is the html...

<input
    matInput
    formControlName="earnings"
    id="{{ earnings + i }}"
    type="number"
    data-number-to-fixed="2"
    readonly="true"
/>

I want to figure out why the missing control is not displaying so I can take action on that field.

Clay Hess
  • 228
  • 6
  • 24
  • 3
    There isn't a single form array in the code you posted. Post a complete minimal example reproducting the issue. – JB Nizet May 06 '19 at 16:32
  • Would you please provide stackblitz link – Reza May 06 '19 at 17:07
  • 1
    Most likely because due to `disabled` controls doesn't get included into `form.value`. – penleychan May 06 '19 at 17:11
  • JB is correct, this is not a [mcve], but I closed the question as a duplicate, based on this information we have. – AT82 May 06 '19 at 18:20
  • I have edited the code to add more information. I was trying to keep it minimal. The return I have gets put into the form array – Clay Hess May 06 '19 at 19:04
  • Thank you for the link to the disabled controls. I set the html to read only and removed the disabled and it worked. – Clay Hess May 06 '19 at 19:45

0 Answers0