Html 错误：formControlName必须与父formGroup指令一起使用
它在控制台中向我抛出了这个错误，但是每当我clic时，表单都正常工作 说真的，我没有看到这个错误，我有另一个相同语法的模板，它没有给我这个错误Html 错误：formControlName必须与父formGroup指令一起使用,html,angular,Html,Angular,它在控制台中向我抛出了这个错误，但是每当我clic时，表单都正常工作 说真的，我没有看到这个错误，我有另一个相同语法的模板，它没有给我这个错误 <div class="container-fluid"> <div class="row"> <div class="col-md-5"> <div class="card"> <div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="card">
<div class="header">
<h4 class="title">Comparativa mensual</h4>
<p class="category">Año actual</p>
</div>
<div class="content">
<app-pie-graph #graphmonths></app-pie-graph>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card ">
<div class="header">
<div class="formGroup">
<form [formGroup]="dataForm" (ngSubmit)="submit($event)">
<h4 class="title inline">Comparativa diaria</h4>
<my-date-range-picker name="mydaterange" [options]="myOptions" formControlName="myDateRange"></my-date-range-picker>
<button type="submit" class="btn btn-primary">Consultar</button>
</form>
</div>
<p class="category">Vista de una semana</p>
</div>
<div class="content">
<div class="row">
<div class="col-sm-8">
<app-pie-graph #graphdays></app-pie-graph>
</div>
</div>
</div>
</div>
</div>
</div>
比较月经
Año实际值
比较二分体
领事
错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup
指令并向其传递现有的FormGroup实例（您可以在类中创建一个）。
例子：
在你们班：
this.myGroup=newformgroup({
名字：newformcontrol（）
});
import { Component, ViewChild, OnInit, AfterViewInit, QueryList } from '@angular/core';
import { LinearGraphComponent } from '../../shared/graph/linear-graph/linear-graph.component';
import { PieGraphComponent } from '../../shared/graph/pie-graph/pie-graph.component';
import { Validators, FormGroup, FormControl } from '@angular/forms'
import { Data } from '../data';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.css']
})
export class OverviewComponent implements AfterViewInit, OnInit{
@ViewChild('graphdays') private pieGraphDays: PieGraphComponent;
@ViewChild('graphmonths') private pieGraphMonths: PieGraphComponent;
@ViewChild('generaloverview') private linearGraph: LinearGraphComponent;
//COMMON
public getDataRetriever(): Data { return this.dataRetriever; }
//COMMON
//private disableButton(){ this.blocked = true; }
//COMMON
//private activateButton(){ this.blocked = false; }
//COMMON VARIABLE
private userid = parseInt(this.route.parent.snapshot.params.id);
private dataForm = new FormGroup({
myDateRange: new FormControl(null, Validators.required)
});
constructor(
private dataRetriever: Data,
private route: ActivatedRoute
){
}
ngOnInit(){
}
private getMonthAgo(since: Date): Date{
var monthAgo = new Date(since.getTime());
monthAgo.setMonth(monthAgo.getMonth() - 3);
monthAgo.setHours(8, 0, 0, 0);
return monthAgo;
}
private displayLastMonthDaysLinear(){
var that = this;
var yesterday = this.getYesterday();
var monthAgo = this.getMonthAgo(yesterday);
this.getDataRetriever().getRangeDays(this.userid, monthAgo, yesterday, function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
console.log(labels);
that.linearGraph.setChart(data, labels);
});
}
private displayLastWeekPie(){
var that = this;
var monday = this.getMondayCurrentWeek();
var yesterday = this.getYesterday();
if(monday.getDate() === new Date().getDate()) //If today is monday
monday.setDate(monday.getDate()-7); //Get monday from previous week
this.getDataRetriever().getRangeDays(this.userid, monday, yesterday, function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
console.log(labels);
that.pieGraphDays.setChart(data[0].data, labels);
});
}
private displayLastMonthsPie(){
var now = new Date();
var newYear = new Date(now.getFullYear(), 0, 1, 8, 0, 0, 0);
var last = new Date(new Date().setMonth(now.getMonth()-1));
var that = this;
if(newYear.getMonth() === now.getMonth()) //If we are in January (spetial case)
newYear.setFullYear(newYear.getFullYear() - 1); //Get January from past year
this.getDataRetriever().getCountingPerMonth(this.userid, newYear, last, function(){
let data = that.getDataRetriever().getData();
let las = that.getDataRetriever().getXLabels();
console.log(data);
that.pieGraphMonths.setChart(data, las);
});
}
private getDaysToMonth(month, year): number[] { //month not included
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() < month) {
days.push(new Date(date).setHours(8,0,0,0));
date.setDate(date.getDate() + 1);
}
return days;
}
private getYesterday(): Date{
var today = new Date();
today.setDate(today.getDate() - 1);
today.setHours(8,0,0,0);
return today
}
private getMondayCurrentWeek(): Date{
var d = new Date();
var day = d.getDay(),
diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
d.setDate(diff);
d.setHours(8,0,0,0);
return d;
}
ngAfterViewInit(){
this.displayLastMonthsPie();
this.displayLastWeekPie();
this.displayLastMonthDaysLinear();
console.log(this.linearGraph);
}
submit(){
let range = this.getPickedDayRange();
var that = this;
this.getDataRetriever().getRangeDays(this.userid, range[0], range[1], function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
that.pieGraphDays.setChart(data[0].data, labels);
});
}
//COMMON CLASS
private getPickedDayRange(): Date[]{
var begDate = new Date(this.dataForm.value.myDateRange.beginJsDate);
var endDate = new Date(this.dataForm.value.myDateRange.endJsDate);
return [begDate, endDate];
}
}
从'@angular/core'导入{Component，ViewChild，OnInit，AfterViewInit，QueryList}；
从“../../shared/graph/linear graph/linear graph.component”导入{LinearGraphComponent}；
从“../../shared/graph/pie-graph/pie-graph.component”导入{PieGraphComponent}；
从“@angular/forms”导入{Validators，FormGroup，FormControl}
从“../Data”导入{Data}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：“应用程序概述”，
templateUrl:'./overview.component.html'，
样式URL:['./overview.component.css']
})
导出类OverviewComponent实现AfterViewInit、OnInit{
@ViewChild（“graphdays”）私有pieGraphDays:PieGraphComponent；
@ViewChild（“图形月”）私有图形月：图形组件；
@ViewChild（'generaloverview'）私有linearGraph:LinearGraphComponent；
//普通的
public getDataRetriever（）：数据{返回this.dataRetriever；}
//普通的
//private disableButton（）{this.blocked=true；}
//普通的
//私有activateButton（）{this.blocked=false；}
//公共变量
private userid=parseInt（this.route.parent.snapshot.params.id）；
私有数据表单=新表单组({
myDateRange:new FormControl（null，Validators.required）
});
建造师(
专用数据检索器：数据，
专用路由：ActivatedRoute
){
}
恩戈尼尼特（）{
}
私人getMonthAgo（自：日期）：日期{
var monthAgo=新日期（自.getTime（）起）；
monthAgo.setMonth（monthAgo.getMonth（）-3）；
蒙塔哥设定时间（8,0,0,0）；
返回蒙塔戈；
}
私有显示LastMonthDaysLinear（）{
var=这个；
var昨天=this.getDayed（）；
var monthAgo=this.getMonthAgo（昨天）；
this.getDataRetriever（）.getRangeDays（this.userid，monthAgo，beday，function（））{
让data=that.getDataRetriever（）.getData（）；
让labels=that.getDataRetriever（）.getXLabels（）；
控制台日志（标签）；
即.linearGraph.setChart（数据、标签）；
});
}
私有显示LastWeekPie（）{
var=这个；
var monday=this.getMondayCurrentWeek（）；
var昨天=this.getDayed（）；
if（星期一.getDate（）==新日期（）.getDate（））//如果今天是星期一
星期一.setDate（星期一.getDate（）-7）；//从前一周获取星期一
this.getDataRetriever（）.getRangeDays（this.userid，星期一，昨天，函数（））{
让data=that.getDataRetriever（）.getData（）；
让labels=that.getDataRetriever（）.getXLabels（）；
控制台日志（标签）；
即.pieGraphDays.setChart（数据[0]。数据，标签）；
});
}
私有显示LastMonthPie（）{
var now=新日期（）；
var newYear=新日期（现在是.getFullYear（），0,1,8,0,0,0）；
var last=新日期（new Date（）.setMonth（now.getMonth（）-1））；
var=这个；
if（newYear.getMonth（）==now.getMonth（））//如果我们在一月（特殊情况）
newYear.setFullYear（newYear.getFullYear（）-1）；//从去年获取一月
this.getDataRetriever（）.getCountingPerMonth（this.userid，newYear，last，function（））{
让data=that.getDataRetriever（）.getData（）；
设las=that.getDataRetriever（）.getXLabels（）；
控制台日志（数据）；
即.pieGraphMonths.setChart（数据，las）；
});
}
private getDaysToMonth（月，年）：编号[]{//month不包括在内
var日期=新日期（年、月、1）；
风险值天数=[]；
while（date.getMonth（）import { Component, ViewChild, OnInit, AfterViewInit, QueryList } from '@angular/core';
import { LinearGraphComponent } from '../../shared/graph/linear-graph/linear-graph.component';
import { PieGraphComponent } from '../../shared/graph/pie-graph/pie-graph.component';
import { Validators, FormGroup, FormControl } from '@angular/forms'
import { Data } from '../data';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.css']
})
export class OverviewComponent implements AfterViewInit, OnInit{
@ViewChild('graphdays') private pieGraphDays: PieGraphComponent;
@ViewChild('graphmonths') private pieGraphMonths: PieGraphComponent;
@ViewChild('generaloverview') private linearGraph: LinearGraphComponent;
//COMMON
public getDataRetriever(): Data { return this.dataRetriever; }
//COMMON
//private disableButton(){ this.blocked = true; }
//COMMON
//private activateButton(){ this.blocked = false; }
//COMMON VARIABLE
private userid = parseInt(this.route.parent.snapshot.params.id);
private dataForm = new FormGroup({
myDateRange: new FormControl(null, Validators.required)
});
constructor(
private dataRetriever: Data,
private route: ActivatedRoute
){
}
ngOnInit(){
}
private getMonthAgo(since: Date): Date{
var monthAgo = new Date(since.getTime());
monthAgo.setMonth(monthAgo.getMonth() - 3);
monthAgo.setHours(8, 0, 0, 0);
return monthAgo;
}
private displayLastMonthDaysLinear(){
var that = this;
var yesterday = this.getYesterday();
var monthAgo = this.getMonthAgo(yesterday);
this.getDataRetriever().getRangeDays(this.userid, monthAgo, yesterday, function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
console.log(labels);
that.linearGraph.setChart(data, labels);
});
}
private displayLastWeekPie(){
var that = this;
var monday = this.getMondayCurrentWeek();
var yesterday = this.getYesterday();
if(monday.getDate() === new Date().getDate()) //If today is monday
monday.setDate(monday.getDate()-7); //Get monday from previous week
this.getDataRetriever().getRangeDays(this.userid, monday, yesterday, function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
console.log(labels);
that.pieGraphDays.setChart(data[0].data, labels);
});
}
private displayLastMonthsPie(){
var now = new Date();
var newYear = new Date(now.getFullYear(), 0, 1, 8, 0, 0, 0);
var last = new Date(new Date().setMonth(now.getMonth()-1));
var that = this;
if(newYear.getMonth() === now.getMonth()) //If we are in January (spetial case)
newYear.setFullYear(newYear.getFullYear() - 1); //Get January from past year
this.getDataRetriever().getCountingPerMonth(this.userid, newYear, last, function(){
let data = that.getDataRetriever().getData();
let las = that.getDataRetriever().getXLabels();
console.log(data);
that.pieGraphMonths.setChart(data, las);
});
}
private getDaysToMonth(month, year): number[] { //month not included
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() < month) {
days.push(new Date(date).setHours(8,0,0,0));
date.setDate(date.getDate() + 1);
}
return days;
}
private getYesterday(): Date{
var today = new Date();
today.setDate(today.getDate() - 1);
today.setHours(8,0,0,0);
return today
}
private getMondayCurrentWeek(): Date{
var d = new Date();
var day = d.getDay(),
diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
d.setDate(diff);
d.setHours(8,0,0,0);
return d;
}
ngAfterViewInit(){
this.displayLastMonthsPie();
this.displayLastWeekPie();
this.displayLastMonthDaysLinear();
console.log(this.linearGraph);
}
submit(){
let range = this.getPickedDayRange();
var that = this;
this.getDataRetriever().getRangeDays(this.userid, range[0], range[1], function(){
let data = that.getDataRetriever().getData();
let labels = that.getDataRetriever().getXLabels();
that.pieGraphDays.setChart(data[0].data, labels);
});
}
//COMMON CLASS
private getPickedDayRange(): Date[]{
var begDate = new Date(this.dataForm.value.myDateRange.beginJsDate);
var endDate = new Date(this.dataForm.value.myDateRange.endJsDate);
return [begDate, endDate];
}
}
feedbackValues = [1,2,3,4,5];
constructor(private formBuilder: FormBuilder) {
this.surveyForm = this.formBuilder.group({
rowForm: this.formBuilder.group({
rating: ['']
})
});
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()" >
<app-survey-row [feedbackValues]=feedbackValues [parentGroup]="surveyForm"></app-survey-row>
<button type="submit">Submit</button>
</form>
export class SurveyRowComponent implements OnInit {
@Input() feedbackValues;
@Input() parentGroup: FormGroup;
constructor( private formBuilder: FormBuilder) {
}
ngOnInit() {
}
}
<div [formGroup]="parentGroup">
<div formGroupName="rowForm">
<div *ngFor="let val of feedbackValues; let i = index">
<input id="{{i+1}}" type="radio" value="{{i+1}}" formControlName="rating">
<label for="{{i+1}}">{{i+1}}</label>
</div>
</div>
</div>