Question

已经针对此错误发布了一些博客，但没有为FormGroup指定任何博客，他们都使用FormArray提供解决方案

出于某种目的，我必须在角度4中创建一个嵌套的FormGroup，当我在开发模式下使用该代码时，它没有显示任何问题并且编译完美。但是，当我尝试在生产模式下编译相同的代码时，它会使用＆＃34;属性＆＃39;控制＆＃39;类型＆＃39; AbstractControl＆＃39;＆＃34;。

上不存在

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.....

所以我在这个html中遇到了 [formControl] =＆＃34; sheduleForm.controls [＆＃39; user_schedule_details＆＃39;]。控件[＆＃39; mon＆＃39; ] .controls [＆＃39; schedule_time＆＃39;]＆＃34; 谁能帮帮我吗。我知道这个表单控件名称看起来很奇怪。但只有这样我才能访问表单值。如果这不是使用formControl的正确方法，请告诉我，我可以使用什么？

Answer 1

尝试将HTML重构为：

<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.....

另外，如果您仍想使用[formControl]，可以使用get()函数执行此操作：

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

甚至

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

嵌套FormGroup在生产模式下构建角度应用程序时返回错误

1 个答案: