nested FormGroup returning error while building the angular app in production mode

Question

there are some blogs already posted for this error but none is specified for FormGroup, they all gave solution with FormArray

I had to make a nested FormGroup in angular 4 for some purpose, when I'm using that code in development mode, it's not showing any issue and compiling perfectly. But, When I'm trying to compile the same code in production mode, it's throwing error with "Property 'controls' does not exist on type 'AbstractControl'".

component.ts :

import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../../service/customer.service';
import { FormControl,FormGroup,FormBuilder,Validators,FormArray } from '@angular/forms';
enter code here
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css'],
providers: [CustomerService,GeolocationService]
})  
export class CustomerComponent implements OnInit {
sheduleForm:FormGroup;
constructor(private service:CustomerService,private geoLocation:GeolocationService,private router:Router,private fb: FormBuilder) {
this.sheduleForm = fb.group({
user_schedule_details:fb.group({      
    mon:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    tue:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    wed:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    thu:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    fri:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    sat:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    }),
    sun:fb.group({
      schedule_time:['00:00:00'],
      status:[false]
    })
  }),      
  time_zone: [d.getTimezoneOffset()],
  time_format : [false],
  city:[null],
  state:[null],
});
}

component.html:

<form [formGroup]="sheduleForm" (ngSubmit)="saveShedule(sheduleForm.value)" novalidate>
<div class="schedule_time">Schedule Time: 
          <span>
            <md-input-container>
              <input type="time" mdInput [formControl]="sheduleForm.controls['user_schedule_details'].controls['mon'].controls['schedule_time']">
            </md-input-container> 
          </span>
        </div> 
        </div>
...... so on.....

So I'm getting issue in this html with [formControl]="sheduleForm.controls['user_schedule_details'].controls['mon'].controls['schedule_time']" Can any one please help me. I know this form-control name looks odd. but only this way i was able to access the form values. If this was not the right way to use formControl, please tell me, what I can use instead?

Answer 1

try to restructure your HTML to something like:

<form [formGroup]="sheduleForm" 
      (ngSubmit)="saveShedule(sheduleForm.value)" 
      novalidate>
  <div formGroupName="user_schedule_details">
    <div formGroupName="mon">
      <div class="schedule_time">Schedule Time: 
        <span>
          <md-input-container>
            <input type="time" 
                   mdInput 
                   formControlName="schedule_time"/>
          </md-input-container> 
        </span>
      </div> 
    </div>
  ...... so on.....

also, if you want to use [formControl] anyway, you can do it using get() function:

<md-input-container>
  <input type="time" 
         mdInput 
         [formControl]="sheduleForm.get('user_schedule_details.mon.schedule_time)"/>
</md-input-container>

or even

[formControl]="sheduleForm.get('user_schedule_details').get('mon').get('schedule_time')"