Mixing
Nested angular reactive form and error with finding control
I want to create a form in Angular which could submit an array of objects.
As a result I want to get such a Json:
order = {
selectedDays: [{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]}
However, I'm having some issues with finding a control. I'm receiving this error:
Error: Cannot find control with path: 'selectedDays -> 0 -> meals -> breakfast'
Here is my code:
HTML:
<div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre>And typescript:
export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}my Day.ts object:
export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
Probably there is something I've missed, however I can't resolve it on my own - I'm pretty new to Angular. I will be grateful for help!
angular checkbox angular-reactive-forms asked Jan 2 at 22:00
SalarSalar
11816
add a comment |
I want to create a form in Angular which could submit an array of objects.
As a result I want to get such a Json:
order = {
selectedDays: [{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]}
However, I'm having some issues with finding a control. I'm receiving this error:
Error: Cannot find control with path: 'selectedDays -> 0 -> meals -> breakfast'
Here is my code:
HTML:
<div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre>And typescript:
export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}my Day.ts object:
export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
Probably there is something I've missed, however I can't resolve it on my own - I'm pretty new to Angular. I will be grateful for help!
angular checkbox angular-reactive-forms asked Jan 2 at 22:00
SalarSalar
11816
add a comment |
I want to create a form in Angular which could submit an array of objects.
As a result I want to get such a Json:
order = {
selectedDays: [{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]}
However, I'm having some issues with finding a control. I'm receiving this error:
Error: Cannot find control with path: 'selectedDays -> 0 -> meals -> breakfast'
Here is my code:
HTML:
<div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre>And typescript:
export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}my Day.ts object:
export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
Probably there is something I've missed, however I can't resolve it on my own - I'm pretty new to Angular. I will be grateful for help!
angular checkbox angular-reactive-forms asked Jan 2 at 22:00
SalarSalar
11816
I want to create a form in Angular which could submit an array of objects.
As a result I want to get such a Json:
order = {
selectedDays: [{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]}
However, I'm having some issues with finding a control. I'm receiving this error:
Error: Cannot find control with path: 'selectedDays -> 0 -> meals -> breakfast'
Here is my code:
HTML:
<div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre>And typescript:
export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}my Day.ts object:
export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
Probably there is something I've missed, however I can't resolve it on my own - I'm pretty new to Angular. I will be grateful for help!
<div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre><div class="" [formGroup]="form">
<button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
<div class="row" formArrayName="selectedDays">
<div *ngFor="let day of form.get('selectedDays').controls; let i=index">
<fieldset>
<legend><h3>Chosen day {{i+1}}: </h3></legend>
<div [formGroupName]="i">
<div class="col-md-3">
<h5>Choose date</h5>
<mat-form-field >
<input matInput formControlName="selectedDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
</div>
</fieldset>
</div>
</div>
<button click="submit()">Send order</button>
<pre>Form values: {{form.value | json}}</pre>export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}export class OrderFormComponent implements OnInit {
public form: FormGroup;
public availableMeals: string = [
"breakfast", "dinner", "supper"
];
order = {
selectedDays: [
{
meals: [
{name: 'breakfast',
selected: false},
{name: 'dinner',
selected: false},
{name: 'supper',
selected: false}
],
selectedDay: "10/01/2018"
}
]
}
constructor(private orderService: OrderService,
private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
selectedDays: this.formBuilder.array()
})
this.setSelectedDays();
}
addNewDay() {
let control = <FormArray>this.form.controls.selectedDays;
control.push(
this.formBuilder.group({
meals: this.formBuilder.array(),
selectedDate: new FormControl((new Date()))
})
)
}
setSelectedDays() {
let control = <FormArray>this.form.controls.selectedDays;
this.order.selectedDays.forEach(x => {
control.push(this.formBuilder.group({
meals: this.mapToCheckboxArrayGroup(this.availableMeals),
selectedDate: x.selectedDay
}))
})
}
submit() {
this.orderService.sendOrder(this.form.value).subscribe(() => {
console.log("Order added");
},
err => {
console.log('error occurred: ' + err.message);
}
);
}
private mapToCheckboxArrayGroup(data: string): FormArray {
return this.formBuilder.array(data.map((meal) => {
return this.formBuilder.group({
name: meal,
selected: false
});
}));
}
}export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
export interface Day {
meals: [
{name: 'breakfast',
selected: boolean},
{name: 'dinner',
selected: boolean},
{name: 'supper',
selected: boolean}
]
selectedDay: string;
}
asked Jan 2 at 22:00
SalarSalar
11816
asked Jan 2 at 22:00
SalarSalar
11816
asked Jan 2 at 22:00
SalarSalar
11816
asked Jan 2 at 22:00
SalarSalar
11816
asked Jan 2 at 22:00
SalarSalar
11816
11816
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So after making my own version of this. There are a few things to discuss. The first is your use of formControlName in the following code
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
The problem is that your controls don't have names. If you pull up the form in the console you'll notice that it goes FormGroup -> Controls -> Meals -> Controls -> 0-3. You'd have to iterate through them again and try to pull out the name from the object itself. This turns out to be really hard, at least for myself it is. Instead, you might want to assign a variable to the index of the array like you did for selectedDays and then use the iterator to access the meals property of order.selectedDays[i].
If you do that, you'd end up switching from hard-coding the various checkboxes and opt for an *ngFor that will pull the information automatically and attaching the value of the selected property in order.selectedDays[i].meals[m] to the checkbox via [(ngModel)].
Check out the StackBlitz example that I linked to, I know that it looks completely different in terms of design, but the methods I mentioned are being used. The control you'd be interested in looking at for the iteration method mentioned is the order-form control, take note that in that control I use get meals(): FormArray { return this.form.get('meals') as FormArray; } which allowed me to use [formControlName] = "i".
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013738%2fnested-angular-reactive-form-and-error-with-finding-control%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So after making my own version of this. There are a few things to discuss. The first is your use of formControlName in the following code
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
The problem is that your controls don't have names. If you pull up the form in the console you'll notice that it goes FormGroup -> Controls -> Meals -> Controls -> 0-3. You'd have to iterate through them again and try to pull out the name from the object itself. This turns out to be really hard, at least for myself it is. Instead, you might want to assign a variable to the index of the array like you did for selectedDays and then use the iterator to access the meals property of order.selectedDays[i].
If you do that, you'd end up switching from hard-coding the various checkboxes and opt for an *ngFor that will pull the information automatically and attaching the value of the selected property in order.selectedDays[i].meals[m] to the checkbox via [(ngModel)].
Check out the StackBlitz example that I linked to, I know that it looks completely different in terms of design, but the methods I mentioned are being used. The control you'd be interested in looking at for the iteration method mentioned is the order-form control, take note that in that control I use get meals(): FormArray { return this.form.get('meals') as FormArray; } which allowed me to use [formControlName] = "i".
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
add a comment |
So after making my own version of this. There are a few things to discuss. The first is your use of formControlName in the following code
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
The problem is that your controls don't have names. If you pull up the form in the console you'll notice that it goes FormGroup -> Controls -> Meals -> Controls -> 0-3. You'd have to iterate through them again and try to pull out the name from the object itself. This turns out to be really hard, at least for myself it is. Instead, you might want to assign a variable to the index of the array like you did for selectedDays and then use the iterator to access the meals property of order.selectedDays[i].
If you do that, you'd end up switching from hard-coding the various checkboxes and opt for an *ngFor that will pull the information automatically and attaching the value of the selected property in order.selectedDays[i].meals[m] to the checkbox via [(ngModel)].
Check out the StackBlitz example that I linked to, I know that it looks completely different in terms of design, but the methods I mentioned are being used. The control you'd be interested in looking at for the iteration method mentioned is the order-form control, take note that in that control I use get meals(): FormArray { return this.form.get('meals') as FormArray; } which allowed me to use [formControlName] = "i".
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
add a comment |
So after making my own version of this. There are a few things to discuss. The first is your use of formControlName in the following code
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
The problem is that your controls don't have names. If you pull up the form in the console you'll notice that it goes FormGroup -> Controls -> Meals -> Controls -> 0-3. You'd have to iterate through them again and try to pull out the name from the object itself. This turns out to be really hard, at least for myself it is. Instead, you might want to assign a variable to the index of the array like you did for selectedDays and then use the iterator to access the meals property of order.selectedDays[i].
If you do that, you'd end up switching from hard-coding the various checkboxes and opt for an *ngFor that will pull the information automatically and attaching the value of the selected property in order.selectedDays[i].meals[m] to the checkbox via [(ngModel)].
Check out the StackBlitz example that I linked to, I know that it looks completely different in terms of design, but the methods I mentioned are being used. The control you'd be interested in looking at for the iteration method mentioned is the order-form control, take note that in that control I use get meals(): FormArray { return this.form.get('meals') as FormArray; } which allowed me to use [formControlName] = "i".
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
So after making my own version of this. There are a few things to discuss. The first is your use of formControlName in the following code
<div class="col-md-3" formArrayName="meals">
<div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
<div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
<div><mat-checkbox formControlName="supper"> supper </mat-checkbox> </div>
</div>
The problem is that your controls don't have names. If you pull up the form in the console you'll notice that it goes FormGroup -> Controls -> Meals -> Controls -> 0-3. You'd have to iterate through them again and try to pull out the name from the object itself. This turns out to be really hard, at least for myself it is. Instead, you might want to assign a variable to the index of the array like you did for selectedDays and then use the iterator to access the meals property of order.selectedDays[i].
If you do that, you'd end up switching from hard-coding the various checkboxes and opt for an *ngFor that will pull the information automatically and attaching the value of the selected property in order.selectedDays[i].meals[m] to the checkbox via [(ngModel)].
Check out the StackBlitz example that I linked to, I know that it looks completely different in terms of design, but the methods I mentioned are being used. The control you'd be interested in looking at for the iteration method mentioned is the order-form control, take note that in that control I use get meals(): FormArray { return this.form.get('meals') as FormArray; } which allowed me to use [formControlName] = "i".
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
answered Jan 3 at 9:26
Colby HunterColby Hunter
16910
16910
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
add a comment |
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
This solution is really helpful for me. Thank you very much!
– Salar
Jan 3 at 19:47
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013738%2fnested-angular-reactive-form-and-error-with-finding-control%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
