Input values in reactive forms are not fetched ( Angular5)
I have used reactive forms in my application.
I am assigning the value to the input fields using interpolation.
After submitting the form, the value assigned to the input field using interpolation is not fetched. Can someone tell me what am I doing wrong?
main.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input value={{item}} type="text" class="form-control"
formControlName="Item">
</div>
<button type="submit"> Next </button> </form>
main.component.ts
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
Item: new FormControl('', Validators.required)
})}
onSubmit(value){
console.log(value);
}
angular
add a comment |
I have used reactive forms in my application.
I am assigning the value to the input fields using interpolation.
After submitting the form, the value assigned to the input field using interpolation is not fetched. Can someone tell me what am I doing wrong?
main.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input value={{item}} type="text" class="form-control"
formControlName="Item">
</div>
<button type="submit"> Next </button> </form>
main.component.ts
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
Item: new FormControl('', Validators.required)
})}
onSubmit(value){
console.log(value);
}
angular
1
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58
add a comment |
I have used reactive forms in my application.
I am assigning the value to the input fields using interpolation.
After submitting the form, the value assigned to the input field using interpolation is not fetched. Can someone tell me what am I doing wrong?
main.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input value={{item}} type="text" class="form-control"
formControlName="Item">
</div>
<button type="submit"> Next </button> </form>
main.component.ts
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
Item: new FormControl('', Validators.required)
})}
onSubmit(value){
console.log(value);
}
angular
I have used reactive forms in my application.
I am assigning the value to the input fields using interpolation.
After submitting the form, the value assigned to the input field using interpolation is not fetched. Can someone tell me what am I doing wrong?
main.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input value={{item}} type="text" class="form-control"
formControlName="Item">
</div>
<button type="submit"> Next </button> </form>
main.component.ts
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
Item: new FormControl('', Validators.required)
})}
onSubmit(value){
console.log(value);
}
angular
angular
asked Nov 22 '18 at 21:13
user10648256user10648256
536
536
1
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58
add a comment |
1
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58
1
1
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58
add a comment |
3 Answers
3
active
oldest
votes
Try with:
<input value="{{item}}" type="text" class="form-control"
formControlName="Item">
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
add a comment |
With Reactive forms you don't need to set value="{{ item }}"
.
But where item
variable is defined?
You could do this:
<form
[formGroup]="form"
(ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
formControlName="Item">
</div>
<button type="submit">Next</button>
</form>
add a comment |
It seems to me there’s a slight confusion on how Reactive Forms work.
With Reactive Forms the source of truth is already on the component, in the model, and not in the template. So whenever there’s a change in the control it will be reflected in a synchronous way in the model.
Your template should not need more than this
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div>
<button type="submit"> Next </button> </form>
And then in the component
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}
onSubmit(){
console.log(this.form.value);
}
I got rid of the unneeded interpolation and the unnecessary passing of the form
on the submit function. Also I’ve renamed the control name to item
with lowercase because capital case should be used only in Objects
that can be newed like classes
.
Have a look on the Reactive Forms documentation to get a better idea on how they work
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
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%2f53438046%2finput-values-in-reactive-forms-are-not-fetched-angular5%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
Try with:
<input value="{{item}}" type="text" class="form-control"
formControlName="Item">
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
add a comment |
Try with:
<input value="{{item}}" type="text" class="form-control"
formControlName="Item">
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
add a comment |
Try with:
<input value="{{item}}" type="text" class="form-control"
formControlName="Item">
Try with:
<input value="{{item}}" type="text" class="form-control"
formControlName="Item">
answered Nov 22 '18 at 21:25
CoveredEeCoveredEe
1698
1698
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
add a comment |
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
I had tried this, it doesn't work
– user10648256
Nov 22 '18 at 21:43
add a comment |
With Reactive forms you don't need to set value="{{ item }}"
.
But where item
variable is defined?
You could do this:
<form
[formGroup]="form"
(ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
formControlName="Item">
</div>
<button type="submit">Next</button>
</form>
add a comment |
With Reactive forms you don't need to set value="{{ item }}"
.
But where item
variable is defined?
You could do this:
<form
[formGroup]="form"
(ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
formControlName="Item">
</div>
<button type="submit">Next</button>
</form>
add a comment |
With Reactive forms you don't need to set value="{{ item }}"
.
But where item
variable is defined?
You could do this:
<form
[formGroup]="form"
(ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
formControlName="Item">
</div>
<button type="submit">Next</button>
</form>
With Reactive forms you don't need to set value="{{ item }}"
.
But where item
variable is defined?
You could do this:
<form
[formGroup]="form"
(ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
formControlName="Item">
</div>
<button type="submit">Next</button>
</form>
answered Nov 22 '18 at 22:05
ptesserptesser
224410
224410
add a comment |
add a comment |
It seems to me there’s a slight confusion on how Reactive Forms work.
With Reactive Forms the source of truth is already on the component, in the model, and not in the template. So whenever there’s a change in the control it will be reflected in a synchronous way in the model.
Your template should not need more than this
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div>
<button type="submit"> Next </button> </form>
And then in the component
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}
onSubmit(){
console.log(this.form.value);
}
I got rid of the unneeded interpolation and the unnecessary passing of the form
on the submit function. Also I’ve renamed the control name to item
with lowercase because capital case should be used only in Objects
that can be newed like classes
.
Have a look on the Reactive Forms documentation to get a better idea on how they work
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
add a comment |
It seems to me there’s a slight confusion on how Reactive Forms work.
With Reactive Forms the source of truth is already on the component, in the model, and not in the template. So whenever there’s a change in the control it will be reflected in a synchronous way in the model.
Your template should not need more than this
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div>
<button type="submit"> Next </button> </form>
And then in the component
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}
onSubmit(){
console.log(this.form.value);
}
I got rid of the unneeded interpolation and the unnecessary passing of the form
on the submit function. Also I’ve renamed the control name to item
with lowercase because capital case should be used only in Objects
that can be newed like classes
.
Have a look on the Reactive Forms documentation to get a better idea on how they work
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
add a comment |
It seems to me there’s a slight confusion on how Reactive Forms work.
With Reactive Forms the source of truth is already on the component, in the model, and not in the template. So whenever there’s a change in the control it will be reflected in a synchronous way in the model.
Your template should not need more than this
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div>
<button type="submit"> Next </button> </form>
And then in the component
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}
onSubmit(){
console.log(this.form.value);
}
I got rid of the unneeded interpolation and the unnecessary passing of the form
on the submit function. Also I’ve renamed the control name to item
with lowercase because capital case should be used only in Objects
that can be newed like classes
.
Have a look on the Reactive Forms documentation to get a better idea on how they work
It seems to me there’s a slight confusion on how Reactive Forms work.
With Reactive Forms the source of truth is already on the component, in the model, and not in the template. So whenever there’s a change in the control it will be reflected in a synchronous way in the model.
Your template should not need more than this
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div>
<button type="submit"> Next </button> </form>
And then in the component
export class MainComponent implements OnInit {
form: FormGroup;
constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}
onSubmit(){
console.log(this.form.value);
}
I got rid of the unneeded interpolation and the unnecessary passing of the form
on the submit function. Also I’ve renamed the control name to item
with lowercase because capital case should be used only in Objects
that can be newed like classes
.
Have a look on the Reactive Forms documentation to get a better idea on how they work
edited Nov 22 '18 at 22:16
answered Nov 22 '18 at 22:07
Hugo NoroHugo Noro
1,6501515
1,6501515
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
add a comment |
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
I had used interpolation as I was assigning some value from component to html input element. Later when submit was clicked, I wanted to pass the complete data from form back to component. But when I was trying to do this, all the data was fetched except the values of these input element which I was assigning using interpolation.
– user10648256
Nov 22 '18 at 22:27
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
So this is where your confusion is. The data is already in the form. Whenever you change the data in the input it will also change in the component in a synchronous way. You don’t need to pass anything up or down. If you check my solution you will see that it will log whichever value you set in the input. That’s why they are called reactive forms. Whenever you change the data in the component or in the template the form variable in the component will always be in sync. That’s the beauty of it :)
– Hugo Noro
Nov 22 '18 at 22:33
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
If this solution solved your problem please don’t forget to check the answer as accepted so it can help others with a similar issue.
– Hugo Noro
Nov 22 '18 at 22:41
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I know that the form contains all the data. But in my case when I am trying to print the form value, all the data is fetched from the form but only the ones assigned using interpolation is not fetched by form. Why is this happening?
– user10648256
Nov 23 '18 at 16:05
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
I still don’t understand the use case for the interpolation. Why do you need the interpolation for?
– Hugo Noro
Nov 23 '18 at 16:11
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%2f53438046%2finput-values-in-reactive-forms-are-not-fetched-angular5%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
1
What exactly are you trying to achieve? It seems there’s a bit of confusion on how reactive forms work. Why are you passing form.value on the onSubmit? The source of truth is in the component already, not on the template. And why do you need interpolation for a control of a reactive form?
– Hugo Noro
Nov 22 '18 at 21:58