Input values in reactive forms are not fetched ( Angular5)












2















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









share|improve this question


















  • 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


















2















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









share|improve this question


















  • 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
















2












2








2








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









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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
















  • 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














3 Answers
3






active

oldest

votes


















0














Try with:



<input value="{{item}}" type="text" class="form-control"
formControlName="Item">





share|improve this answer
























  • I had tried this, it doesn't work

    – user10648256
    Nov 22 '18 at 21:43



















0














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>





share|improve this answer































    0














    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






    share|improve this answer


























    • 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











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


    }
    });














    draft saved

    draft discarded


















    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









    0














    Try with:



    <input value="{{item}}" type="text" class="form-control"
    formControlName="Item">





    share|improve this answer
























    • I had tried this, it doesn't work

      – user10648256
      Nov 22 '18 at 21:43
















    0














    Try with:



    <input value="{{item}}" type="text" class="form-control"
    formControlName="Item">





    share|improve this answer
























    • I had tried this, it doesn't work

      – user10648256
      Nov 22 '18 at 21:43














    0












    0








    0







    Try with:



    <input value="{{item}}" type="text" class="form-control"
    formControlName="Item">





    share|improve this answer













    Try with:



    <input value="{{item}}" type="text" class="form-control"
    formControlName="Item">






    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • 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













    0














    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>





    share|improve this answer




























      0














      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>





      share|improve this answer


























        0












        0








        0







        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>





        share|improve this answer













        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 '18 at 22:05









        ptesserptesser

        224410




        224410























            0














            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






            share|improve this answer


























            • 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
















            0














            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






            share|improve this answer


























            • 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














            0












            0








            0







            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






            share|improve this answer















            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







            share|improve this answer














            share|improve this answer



            share|improve this answer








            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



















            • 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


















            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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

            "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

            Alcedinidae

            RAC Tourist Trophy