在生产模式下构建 angular 应用程序时嵌套的 FormGroup 返回错误
nested FormGroup returning error while building the angular app in production mode
已经有一些博客针对这个错误发帖了,但是none是针对FormGroup指定的,他们都用FormArray
给出了解决方案
出于某种目的,我不得不在 angular 4 中创建一个嵌套的 FormGroup,当我在开发模式下使用该代码时,它没有显示任何问题并且编译完美。但是,当我试图在生产模式下编译相同的代码时,它会抛出 "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.....
所以我在 html [formControl]="sheduleForm.controls['user_schedule_details'].controls['mon'].controls['schedule_time']" 中遇到问题
谁能帮帮我吗。我知道这个表单控件名称看起来很奇怪。但只有这样我才能访问表单值。如果这不是使用 formControl 的正确方法,请告诉我,我可以用什么代替?
尝试将您的 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')"
已经有一些博客针对这个错误发帖了,但是none是针对FormGroup指定的,他们都用FormArray
给出了解决方案出于某种目的,我不得不在 angular 4 中创建一个嵌套的 FormGroup,当我在开发模式下使用该代码时,它没有显示任何问题并且编译完美。但是,当我试图在生产模式下编译相同的代码时,它会抛出 "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.....
所以我在 html [formControl]="sheduleForm.controls['user_schedule_details'].controls['mon'].controls['schedule_time']" 中遇到问题 谁能帮帮我吗。我知道这个表单控件名称看起来很奇怪。但只有这样我才能访问表单值。如果这不是使用 formControl 的正确方法,请告诉我,我可以用什么代替?
尝试将您的 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')"