Angular reactive form validation with dynamically named controls











up vote
1
down vote

favorite












In my Angular 7 app using reactive forms I'm creating input elements based on an *ngFor loop, so I end up with an input dynamically named:



<nav class="level" *ngFor="let work of workLeft">
<input [formControlName]="work.abbrev">


which of course works fine, but now I'm trying to add the validation error messages to the form, but I'm not sure how to "address" the item. For example, the div would normally look like so:



<div *ngIf="name.errors.required">


but I don't have name there as it's the dynamic work.abbrev value. What's the right way to handle this?



You can see my attempt here: https://stackblitz.com/edit/angular-8zevc1










share|improve this question
























  • Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
    – SiddAjmera
    9 hours ago












  • No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
    – Gargoyle
    9 hours ago










  • I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
    – Gargoyle
    9 hours ago






  • 1




    That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
    – SiddAjmera
    9 hours ago










  • OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
    – Gargoyle
    9 hours ago















up vote
1
down vote

favorite












In my Angular 7 app using reactive forms I'm creating input elements based on an *ngFor loop, so I end up with an input dynamically named:



<nav class="level" *ngFor="let work of workLeft">
<input [formControlName]="work.abbrev">


which of course works fine, but now I'm trying to add the validation error messages to the form, but I'm not sure how to "address" the item. For example, the div would normally look like so:



<div *ngIf="name.errors.required">


but I don't have name there as it's the dynamic work.abbrev value. What's the right way to handle this?



You can see my attempt here: https://stackblitz.com/edit/angular-8zevc1










share|improve this question
























  • Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
    – SiddAjmera
    9 hours ago












  • No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
    – Gargoyle
    9 hours ago










  • I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
    – Gargoyle
    9 hours ago






  • 1




    That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
    – SiddAjmera
    9 hours ago










  • OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
    – Gargoyle
    9 hours ago













up vote
1
down vote

favorite









up vote
1
down vote

favorite











In my Angular 7 app using reactive forms I'm creating input elements based on an *ngFor loop, so I end up with an input dynamically named:



<nav class="level" *ngFor="let work of workLeft">
<input [formControlName]="work.abbrev">


which of course works fine, but now I'm trying to add the validation error messages to the form, but I'm not sure how to "address" the item. For example, the div would normally look like so:



<div *ngIf="name.errors.required">


but I don't have name there as it's the dynamic work.abbrev value. What's the right way to handle this?



You can see my attempt here: https://stackblitz.com/edit/angular-8zevc1










share|improve this question















In my Angular 7 app using reactive forms I'm creating input elements based on an *ngFor loop, so I end up with an input dynamically named:



<nav class="level" *ngFor="let work of workLeft">
<input [formControlName]="work.abbrev">


which of course works fine, but now I'm trying to add the validation error messages to the form, but I'm not sure how to "address" the item. For example, the div would normally look like so:



<div *ngIf="name.errors.required">


but I don't have name there as it's the dynamic work.abbrev value. What's the right way to handle this?



You can see my attempt here: https://stackblitz.com/edit/angular-8zevc1







angular angular-reactive-forms angular2-form-validation






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 8 hours ago

























asked 9 hours ago









Gargoyle

2,63842647




2,63842647












  • Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
    – SiddAjmera
    9 hours ago












  • No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
    – Gargoyle
    9 hours ago










  • I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
    – Gargoyle
    9 hours ago






  • 1




    That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
    – SiddAjmera
    9 hours ago










  • OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
    – Gargoyle
    9 hours ago


















  • Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
    – SiddAjmera
    9 hours ago












  • No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
    – Gargoyle
    9 hours ago










  • I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
    – Gargoyle
    9 hours ago






  • 1




    That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
    – SiddAjmera
    9 hours ago










  • OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
    – Gargoyle
    9 hours ago
















Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
– SiddAjmera
9 hours ago






Is workLeft some sort of a FormArray? If not, I recommend it to be one. That way you can create a getter on your Component Class and use the at API on a FormArray to get the relevant FormControl/FormGroup
– SiddAjmera
9 hours ago














No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
– Gargoyle
9 hours ago




No, it's just an array of objects that was returned from an http webservice. But it's not a class variable, it's just created in the call that generates the form data.
– Gargoyle
9 hours ago












I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
– Gargoyle
9 hours ago




I'm not sure how your comment helps though as I'm asking about how to deal with it in the HTML itself, and I specifically mentioned not wanting to use a FormArray.
– Gargoyle
9 hours ago




1




1




That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
– SiddAjmera
9 hours ago




That's because FormArray is something that is generally used in such scenarios. You want to show validation errors for each item in workLeft and it again is a form control. Also, I don't think you will need to keep any mapping to track the index and the form control anywhere. That's not how it works.
– SiddAjmera
9 hours ago












OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
– Gargoyle
9 hours ago




OK, if it's the right way so be it. Can you show me what the div's *ngIf should look like please?
– Gargoyle
9 hours ago












1 Answer
1






active

oldest

votes

















up vote
0
down vote



accepted










I suggest using FormArray for this. With FormArray, here's how your implementation is going to look like:



For the Component Class:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

export interface Data {
abbrev: string;
max: number;
}

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
workForm: FormGroup;
workLeft: any;

constructor(private fb: FormBuilder) {}

ngOnInit () {

this.workForm = this.fb.group({
points: this.fb.array()
});

this.fillFormArray();
}

private fakeWebserviceCall(): Data {
return [
{ abbrev: 'foo', max: 12 },
{ abbrev: 'bar', max: 10 }
];
}

private fillFormArray() {
this.workLeft = this.fakeWebserviceCall();
const formControlsArray = this.workLeft.map(work => this.fb.control(work.abbrev, [Validators.min(0), Validators.max(work.max)]));
formControlsArray.forEach(control => this.points.push(control));
console.log(this.workForm.value);
}

get points(): FormArray {
return <FormArray>this.workForm.get('points');
}

pointAt(index) {
return (<FormArray>this.workForm.get('points')).at(index);
}

}


And in the template:



<form [formGroup]="workForm">
<div formArrayName="points">
<div *ngFor="let point of points.controls; let i = index">
{{ workLeft[i].abbrev }}: <input type="number" [formControlName]="i">
<div *ngIf="pointAt(i).invalid && (pointAt(i).dirty || pointAt(i).touched)">
The field is invalid
</div>
</div>
</div>
</form>


Here's a Sample StackBlitz for your ref.



PS: I've made a few updates to the StackBlitz that you've shared including things that Angular Style Guide recommends along with the actual solution. Hope that helps.






share|improve this answer





















  • Thanks, appreciate the help!
    – Gargoyle
    7 hours ago











Your Answer






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',
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
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400565%2fangular-reactive-form-validation-with-dynamically-named-controls%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








up vote
0
down vote



accepted










I suggest using FormArray for this. With FormArray, here's how your implementation is going to look like:



For the Component Class:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

export interface Data {
abbrev: string;
max: number;
}

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
workForm: FormGroup;
workLeft: any;

constructor(private fb: FormBuilder) {}

ngOnInit () {

this.workForm = this.fb.group({
points: this.fb.array()
});

this.fillFormArray();
}

private fakeWebserviceCall(): Data {
return [
{ abbrev: 'foo', max: 12 },
{ abbrev: 'bar', max: 10 }
];
}

private fillFormArray() {
this.workLeft = this.fakeWebserviceCall();
const formControlsArray = this.workLeft.map(work => this.fb.control(work.abbrev, [Validators.min(0), Validators.max(work.max)]));
formControlsArray.forEach(control => this.points.push(control));
console.log(this.workForm.value);
}

get points(): FormArray {
return <FormArray>this.workForm.get('points');
}

pointAt(index) {
return (<FormArray>this.workForm.get('points')).at(index);
}

}


And in the template:



<form [formGroup]="workForm">
<div formArrayName="points">
<div *ngFor="let point of points.controls; let i = index">
{{ workLeft[i].abbrev }}: <input type="number" [formControlName]="i">
<div *ngIf="pointAt(i).invalid && (pointAt(i).dirty || pointAt(i).touched)">
The field is invalid
</div>
</div>
</div>
</form>


Here's a Sample StackBlitz for your ref.



PS: I've made a few updates to the StackBlitz that you've shared including things that Angular Style Guide recommends along with the actual solution. Hope that helps.






share|improve this answer





















  • Thanks, appreciate the help!
    – Gargoyle
    7 hours ago















up vote
0
down vote



accepted










I suggest using FormArray for this. With FormArray, here's how your implementation is going to look like:



For the Component Class:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

export interface Data {
abbrev: string;
max: number;
}

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
workForm: FormGroup;
workLeft: any;

constructor(private fb: FormBuilder) {}

ngOnInit () {

this.workForm = this.fb.group({
points: this.fb.array()
});

this.fillFormArray();
}

private fakeWebserviceCall(): Data {
return [
{ abbrev: 'foo', max: 12 },
{ abbrev: 'bar', max: 10 }
];
}

private fillFormArray() {
this.workLeft = this.fakeWebserviceCall();
const formControlsArray = this.workLeft.map(work => this.fb.control(work.abbrev, [Validators.min(0), Validators.max(work.max)]));
formControlsArray.forEach(control => this.points.push(control));
console.log(this.workForm.value);
}

get points(): FormArray {
return <FormArray>this.workForm.get('points');
}

pointAt(index) {
return (<FormArray>this.workForm.get('points')).at(index);
}

}


And in the template:



<form [formGroup]="workForm">
<div formArrayName="points">
<div *ngFor="let point of points.controls; let i = index">
{{ workLeft[i].abbrev }}: <input type="number" [formControlName]="i">
<div *ngIf="pointAt(i).invalid && (pointAt(i).dirty || pointAt(i).touched)">
The field is invalid
</div>
</div>
</div>
</form>


Here's a Sample StackBlitz for your ref.



PS: I've made a few updates to the StackBlitz that you've shared including things that Angular Style Guide recommends along with the actual solution. Hope that helps.






share|improve this answer





















  • Thanks, appreciate the help!
    – Gargoyle
    7 hours ago













up vote
0
down vote



accepted







up vote
0
down vote



accepted






I suggest using FormArray for this. With FormArray, here's how your implementation is going to look like:



For the Component Class:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

export interface Data {
abbrev: string;
max: number;
}

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
workForm: FormGroup;
workLeft: any;

constructor(private fb: FormBuilder) {}

ngOnInit () {

this.workForm = this.fb.group({
points: this.fb.array()
});

this.fillFormArray();
}

private fakeWebserviceCall(): Data {
return [
{ abbrev: 'foo', max: 12 },
{ abbrev: 'bar', max: 10 }
];
}

private fillFormArray() {
this.workLeft = this.fakeWebserviceCall();
const formControlsArray = this.workLeft.map(work => this.fb.control(work.abbrev, [Validators.min(0), Validators.max(work.max)]));
formControlsArray.forEach(control => this.points.push(control));
console.log(this.workForm.value);
}

get points(): FormArray {
return <FormArray>this.workForm.get('points');
}

pointAt(index) {
return (<FormArray>this.workForm.get('points')).at(index);
}

}


And in the template:



<form [formGroup]="workForm">
<div formArrayName="points">
<div *ngFor="let point of points.controls; let i = index">
{{ workLeft[i].abbrev }}: <input type="number" [formControlName]="i">
<div *ngIf="pointAt(i).invalid && (pointAt(i).dirty || pointAt(i).touched)">
The field is invalid
</div>
</div>
</div>
</form>


Here's a Sample StackBlitz for your ref.



PS: I've made a few updates to the StackBlitz that you've shared including things that Angular Style Guide recommends along with the actual solution. Hope that helps.






share|improve this answer












I suggest using FormArray for this. With FormArray, here's how your implementation is going to look like:



For the Component Class:



import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

export interface Data {
abbrev: string;
max: number;
}

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
workForm: FormGroup;
workLeft: any;

constructor(private fb: FormBuilder) {}

ngOnInit () {

this.workForm = this.fb.group({
points: this.fb.array()
});

this.fillFormArray();
}

private fakeWebserviceCall(): Data {
return [
{ abbrev: 'foo', max: 12 },
{ abbrev: 'bar', max: 10 }
];
}

private fillFormArray() {
this.workLeft = this.fakeWebserviceCall();
const formControlsArray = this.workLeft.map(work => this.fb.control(work.abbrev, [Validators.min(0), Validators.max(work.max)]));
formControlsArray.forEach(control => this.points.push(control));
console.log(this.workForm.value);
}

get points(): FormArray {
return <FormArray>this.workForm.get('points');
}

pointAt(index) {
return (<FormArray>this.workForm.get('points')).at(index);
}

}


And in the template:



<form [formGroup]="workForm">
<div formArrayName="points">
<div *ngFor="let point of points.controls; let i = index">
{{ workLeft[i].abbrev }}: <input type="number" [formControlName]="i">
<div *ngIf="pointAt(i).invalid && (pointAt(i).dirty || pointAt(i).touched)">
The field is invalid
</div>
</div>
</div>
</form>


Here's a Sample StackBlitz for your ref.



PS: I've made a few updates to the StackBlitz that you've shared including things that Angular Style Guide recommends along with the actual solution. Hope that helps.







share|improve this answer












share|improve this answer



share|improve this answer










answered 8 hours ago









SiddAjmera

9,98721137




9,98721137












  • Thanks, appreciate the help!
    – Gargoyle
    7 hours ago


















  • Thanks, appreciate the help!
    – Gargoyle
    7 hours ago
















Thanks, appreciate the help!
– Gargoyle
7 hours ago




Thanks, appreciate the help!
– Gargoyle
7 hours ago


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400565%2fangular-reactive-form-validation-with-dynamically-named-controls%23new-answer', 'question_page');
}
);

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







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...