How access valid property of subgroup from template of angular reactive form element The 2019 Stack Overflow Developer Survey Results Are In Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceAngular 2 - Form validation for warnings/hintsAngular 2 Custom validator that depends on another form controlAngular2 reactive forms, how to pass FormGroup and FormArray to sub componentAngular 2 (Reactive forms) Listing all validation rules (like pattern, minlength, maxlength) in a form control whether or not in an error objectAngular reactive forms and custom validator errorUse MatDatePicker under reactive form in Angular 5Angular 6: How to add validation to dynamic reactive form with index interpolation?Angular 6 Reactive Form, FormArray Async Validator unable to highlight a FormControlAngular reactive forms input validation not working on loadwhat is validated first ? FormGroup or FormControls in reactive forms?
Is this wall load bearing? Blueprints and photos attached
60's-70's movie: home appliances revolting against the owners
Variable with quotation marks "$()"
How do you keep chess fun when your opponent constantly beats you?
Mortgage adviser recommends a longer term than necessary combined with overpayments
Why can't devices on different VLANs, but on the same subnet, communicate?
Do warforged have souls?
Is there a writing software that you can sort scenes like slides in PowerPoint?
Loose spokes after only a few rides
Can I visit the Trinity College (Cambridge) library and see some of their rare books
Why did Peik Lin say, "I'm not an animal"?
My body leaves; my core can stay
Is an up-to-date browser secure on an out-of-date OS?
How do I design a circuit to convert a 100 mV and 50 Hz sine wave to a square wave?
Can the Right Ascension and Argument of Perigee of a spacecraft's orbit keep varying by themselves with time?
What force causes entropy to increase?
Are there continuous functions who are the same in an interval but differ in at least one other point?
What information about me do stores get via my credit card?
"... to apply for a visa" or "... and applied for a visa"?
Windows 10: How to Lock (not sleep) laptop on lid close?
Do working physicists consider Newtonian mechanics to be "falsified"?
Why not take a picture of a closer black hole?
Student Loan from years ago pops up and is taking my salary
How to determine omitted units in a publication
How access valid property of subgroup from template of angular reactive form element
The 2019 Stack Overflow Developer Survey Results Are In
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceAngular 2 - Form validation for warnings/hintsAngular 2 Custom validator that depends on another form controlAngular2 reactive forms, how to pass FormGroup and FormArray to sub componentAngular 2 (Reactive forms) Listing all validation rules (like pattern, minlength, maxlength) in a form control whether or not in an error objectAngular reactive forms and custom validator errorUse MatDatePicker under reactive form in Angular 5Angular 6: How to add validation to dynamic reactive form with index interpolation?Angular 6 Reactive Form, FormArray Async Validator unable to highlight a FormControlAngular reactive forms input validation not working on loadwhat is validated first ? FormGroup or FormControls in reactive forms?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am trying to add an error class when a form element has an invalid value but I can not access it and I can not figure how to do it.
code.component.ts
this.dateRangeForm = this.fb.group(
from: this.fb.group(
fromYear: new FormControl(null, [ValidYearsValidator]),
fromMonth: new FormControl(null, []),
fromDay: new FormControl(null, [])
),
to: this.fb.group(
toYear: new FormControl(null, []),
toMonth: new FormControl(null, []),
toDay: new FormControl(null, [])
)
);
code.component.html
<form [formGroup]="dateRangeForm">
<span formGroupName="from">
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!fromYear.valid">
My problem is in the last input of the code below. I am trying to access the fromYear.valid property but I get this error after loading the form:
ERROR TypeError: Cannot read property 'valid' of undefined
angular angular-reactive-forms asked Mar 22 at 5:41
dmancedmance
11112
add a comment |
I am trying to add an error class when a form element has an invalid value but I can not access it and I can not figure how to do it.
code.component.ts
this.dateRangeForm = this.fb.group(
from: this.fb.group(
fromYear: new FormControl(null, [ValidYearsValidator]),
fromMonth: new FormControl(null, []),
fromDay: new FormControl(null, [])
),
to: this.fb.group(
toYear: new FormControl(null, []),
toMonth: new FormControl(null, []),
toDay: new FormControl(null, [])
)
);
code.component.html
<form [formGroup]="dateRangeForm">
<span formGroupName="from">
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!fromYear.valid">
My problem is in the last input of the code below. I am trying to access the fromYear.valid property but I get this error after loading the form:
ERROR TypeError: Cannot read property 'valid' of undefined
angular angular-reactive-forms asked Mar 22 at 5:41
dmancedmance
11112
What is the value offromyear?
– Sachin Gupta
Mar 22 at 5:50
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
The 'formYear' in[class.error]='!fromyear.valid, is a property of the component, not aformControlNameor a control's value, verify that you have a variable namedfromYearin your component.
– Sachin Gupta
Mar 22 at 5:56
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
1
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12
add a comment |
I am trying to add an error class when a form element has an invalid value but I can not access it and I can not figure how to do it.
code.component.ts
this.dateRangeForm = this.fb.group(
from: this.fb.group(
fromYear: new FormControl(null, [ValidYearsValidator]),
fromMonth: new FormControl(null, []),
fromDay: new FormControl(null, [])
),
to: this.fb.group(
toYear: new FormControl(null, []),
toMonth: new FormControl(null, []),
toDay: new FormControl(null, [])
)
);
code.component.html
<form [formGroup]="dateRangeForm">
<span formGroupName="from">
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!fromYear.valid">
My problem is in the last input of the code below. I am trying to access the fromYear.valid property but I get this error after loading the form:
ERROR TypeError: Cannot read property 'valid' of undefined
angular angular-reactive-forms asked Mar 22 at 5:41
dmancedmance
11112
I am trying to add an error class when a form element has an invalid value but I can not access it and I can not figure how to do it.
code.component.ts
this.dateRangeForm = this.fb.group(
from: this.fb.group(
fromYear: new FormControl(null, [ValidYearsValidator]),
fromMonth: new FormControl(null, []),
fromDay: new FormControl(null, [])
),
to: this.fb.group(
toYear: new FormControl(null, []),
toMonth: new FormControl(null, []),
toDay: new FormControl(null, [])
)
);
code.component.html
<form [formGroup]="dateRangeForm">
<span formGroupName="from">
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!fromYear.valid">
My problem is in the last input of the code below. I am trying to access the fromYear.valid property but I get this error after loading the form:
ERROR TypeError: Cannot read property 'valid' of undefined
angular angular-reactive-forms angular angular-reactive-forms asked Mar 22 at 5:41
dmancedmance
11112
asked Mar 22 at 5:41
dmancedmance
11112
asked Mar 22 at 5:41
dmancedmance
11112
asked Mar 22 at 5:41
dmancedmance
11112
asked Mar 22 at 5:41
dmancedmance
11112
11112
What is the value offromyear?
– Sachin Gupta
Mar 22 at 5:50
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
The 'formYear' in[class.error]='!fromyear.valid, is a property of the component, not aformControlNameor a control's value, verify that you have a variable namedfromYearin your component.
– Sachin Gupta
Mar 22 at 5:56
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
1
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12
add a comment |
What is the value offromyear?
– Sachin Gupta
Mar 22 at 5:50
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
The 'formYear' in[class.error]='!fromyear.valid, is a property of the component, not aformControlNameor a control's value, verify that you have a variable namedfromYearin your component.
– Sachin Gupta
Mar 22 at 5:56
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
1
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12
What is the value of
fromyear ?– Sachin Gupta
Mar 22 at 5:50
What is the value of
fromyear ?– Sachin Gupta
Mar 22 at 5:50
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
The 'formYear' in
[class.error]='!fromyear.valid, is a property of the component, not a formControlName or a control's value, verify that you have a variable named fromYear in your component.– Sachin Gupta
Mar 22 at 5:56
The 'formYear' in
[class.error]='!fromyear.valid, is a property of the component, not a formControlName or a control's value, verify that you have a variable named fromYear in your component.– Sachin Gupta
Mar 22 at 5:56
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
1
1
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12
add a comment |
3 Answers
3
active
oldest
votes
You the access the controls using dateGroupForm.controls.from.controls.fromYear.
You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
add a comment |
If you want to get the status of a form control inside of a nested form group this is the way to access it:
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
dateRangeForm.controls.from.controls.fromYear.valid
answered Mar 22 at 6:13
dmancedmance
11112
add a comment |
You need to provide a get method in your component to access the fromYear property.
Example:
get fromYear()
return this.dateRangeForm.get('from.fromYear');
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
add a comment |
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',
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%2f55293517%2fhow-access-valid-property-of-subgroup-from-template-of-angular-reactive-form-ele%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You the access the controls using dateGroupForm.controls.from.controls.fromYear.
You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
add a comment |
You the access the controls using dateGroupForm.controls.from.controls.fromYear.
You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
add a comment |
You the access the controls using dateGroupForm.controls.from.controls.fromYear.
You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
You the access the controls using dateGroupForm.controls.from.controls.fromYear.
You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
answered Mar 22 at 6:12
Sachin GuptaSachin Gupta
1,6071617
1,6071617
add a comment |
add a comment |
If you want to get the status of a form control inside of a nested form group this is the way to access it:
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
dateRangeForm.controls.from.controls.fromYear.valid
answered Mar 22 at 6:13
dmancedmance
11112
add a comment |
If you want to get the status of a form control inside of a nested form group this is the way to access it:
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
dateRangeForm.controls.from.controls.fromYear.valid
answered Mar 22 at 6:13
dmancedmance
11112
add a comment |
If you want to get the status of a form control inside of a nested form group this is the way to access it:
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
dateRangeForm.controls.from.controls.fromYear.valid
answered Mar 22 at 6:13
dmancedmance
11112
If you want to get the status of a form control inside of a nested form group this is the way to access it:
<input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
dateRangeForm.controls.from.controls.fromYear.valid
answered Mar 22 at 6:13
dmancedmance
11112
answered Mar 22 at 6:13
dmancedmance
11112
answered Mar 22 at 6:13
dmancedmance
11112
answered Mar 22 at 6:13
dmancedmance
11112
11112
add a comment |
add a comment |
You need to provide a get method in your component to access the fromYear property.
Example:
get fromYear()
return this.dateRangeForm.get('from.fromYear');
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
add a comment |
You need to provide a get method in your component to access the fromYear property.
Example:
get fromYear()
return this.dateRangeForm.get('from.fromYear');
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
add a comment |
You need to provide a get method in your component to access the fromYear property.
Example:
get fromYear()
return this.dateRangeForm.get('from.fromYear');
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
You need to provide a get method in your component to access the fromYear property.
Example:
get fromYear()
return this.dateRangeForm.get('from.fromYear');
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
answered Mar 22 at 6:16
ashish.gdashish.gd
9091519
9091519
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
add a comment |
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
Thank you! I solved this by accessing directly the form, I think i was coding to early in the morning hehehe
– dmance
Mar 22 at 6:17
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%2f55293517%2fhow-access-valid-property-of-subgroup-from-template-of-angular-reactive-form-ele%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
What is the value of
fromyear?– Sachin Gupta
Mar 22 at 5:50
a number, I set the value after an api call and set if any, if not it starts with null value
– dmance
Mar 22 at 5:53
The 'formYear' in
[class.error]='!fromyear.valid, is a property of the component, not aformControlNameor a control's value, verify that you have a variable namedfromYearin your component.– Sachin Gupta
Mar 22 at 5:56
yes... This was my last attempt, I cannot access to dateRangeForm.from.fromYear.valid
– dmance
Mar 22 at 6:08
1
Ok, solved it... I had to access with: <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear" size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">
– dmance
Mar 22 at 6:12