FormControl display value












-1















How to display some text in input FormControl that not equal to value of this FormControl?



For example, get some object from a server - {id: 1, name: "Name1"}, and set value of FormControl to that object or to object.id but display value set to object.name - "Name1".



Why i need it:



I use angular material autocomplete and it set the value of FormControl to object (from selected mat-option) and display value to string via displayWith. I want to repeate this behavior when fetch data from server for some consistency and convenience










share|improve this question

























  • do you want to keep id as a hidden value?In formcontrol?

    – umesh99
    Dec 30 '18 at 16:37













  • i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

    – alarcl
    Dec 30 '18 at 23:50
















-1















How to display some text in input FormControl that not equal to value of this FormControl?



For example, get some object from a server - {id: 1, name: "Name1"}, and set value of FormControl to that object or to object.id but display value set to object.name - "Name1".



Why i need it:



I use angular material autocomplete and it set the value of FormControl to object (from selected mat-option) and display value to string via displayWith. I want to repeate this behavior when fetch data from server for some consistency and convenience










share|improve this question

























  • do you want to keep id as a hidden value?In formcontrol?

    – umesh99
    Dec 30 '18 at 16:37













  • i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

    – alarcl
    Dec 30 '18 at 23:50














-1












-1








-1








How to display some text in input FormControl that not equal to value of this FormControl?



For example, get some object from a server - {id: 1, name: "Name1"}, and set value of FormControl to that object or to object.id but display value set to object.name - "Name1".



Why i need it:



I use angular material autocomplete and it set the value of FormControl to object (from selected mat-option) and display value to string via displayWith. I want to repeate this behavior when fetch data from server for some consistency and convenience










share|improve this question
















How to display some text in input FormControl that not equal to value of this FormControl?



For example, get some object from a server - {id: 1, name: "Name1"}, and set value of FormControl to that object or to object.id but display value set to object.name - "Name1".



Why i need it:



I use angular material autocomplete and it set the value of FormControl to object (from selected mat-option) and display value to string via displayWith. I want to repeate this behavior when fetch data from server for some consistency and convenience







angular angular-reactive-forms angular-forms






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 30 '18 at 23:46







alarcl

















asked Dec 30 '18 at 15:07









alarclalarcl

444




444













  • do you want to keep id as a hidden value?In formcontrol?

    – umesh99
    Dec 30 '18 at 16:37













  • i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

    – alarcl
    Dec 30 '18 at 23:50



















  • do you want to keep id as a hidden value?In formcontrol?

    – umesh99
    Dec 30 '18 at 16:37













  • i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

    – alarcl
    Dec 30 '18 at 23:50

















do you want to keep id as a hidden value?In formcontrol?

– umesh99
Dec 30 '18 at 16:37







do you want to keep id as a hidden value?In formcontrol?

– umesh99
Dec 30 '18 at 16:37















i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

– alarcl
Dec 30 '18 at 23:50





i want to save object in value of FormControl but show string from this object as angular material autocomplete do it

– alarcl
Dec 30 '18 at 23:50












1 Answer
1






active

oldest

votes


















0














I do some research for my question.



It is need to use FormControlDirective and its valueAccessor.writeValue() for set display value of input (it use renderer) or as alternative nativeElement.value.



And FormControl's setValue() with emitModelToViewChange = false for set FormControl value.



In template



<input [formControl]="ctrlF" #ctrlD="ngForm">


In controller



 @ViewChild('ctrlD', {read: FormControlDirective})
ctrlD :FormControlDirective
...
this.ctrlD.valueAccessor.writeValue("display value")
this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
emitModelToViewChange: false
})


planker






share|improve this answer























    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%2f53978720%2fformcontrol-display-value%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









    0














    I do some research for my question.



    It is need to use FormControlDirective and its valueAccessor.writeValue() for set display value of input (it use renderer) or as alternative nativeElement.value.



    And FormControl's setValue() with emitModelToViewChange = false for set FormControl value.



    In template



    <input [formControl]="ctrlF" #ctrlD="ngForm">


    In controller



     @ViewChild('ctrlD', {read: FormControlDirective})
    ctrlD :FormControlDirective
    ...
    this.ctrlD.valueAccessor.writeValue("display value")
    this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
    emitModelToViewChange: false
    })


    planker






    share|improve this answer




























      0














      I do some research for my question.



      It is need to use FormControlDirective and its valueAccessor.writeValue() for set display value of input (it use renderer) or as alternative nativeElement.value.



      And FormControl's setValue() with emitModelToViewChange = false for set FormControl value.



      In template



      <input [formControl]="ctrlF" #ctrlD="ngForm">


      In controller



       @ViewChild('ctrlD', {read: FormControlDirective})
      ctrlD :FormControlDirective
      ...
      this.ctrlD.valueAccessor.writeValue("display value")
      this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
      emitModelToViewChange: false
      })


      planker






      share|improve this answer


























        0












        0








        0







        I do some research for my question.



        It is need to use FormControlDirective and its valueAccessor.writeValue() for set display value of input (it use renderer) or as alternative nativeElement.value.



        And FormControl's setValue() with emitModelToViewChange = false for set FormControl value.



        In template



        <input [formControl]="ctrlF" #ctrlD="ngForm">


        In controller



         @ViewChild('ctrlD', {read: FormControlDirective})
        ctrlD :FormControlDirective
        ...
        this.ctrlD.valueAccessor.writeValue("display value")
        this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
        emitModelToViewChange: false
        })


        planker






        share|improve this answer













        I do some research for my question.



        It is need to use FormControlDirective and its valueAccessor.writeValue() for set display value of input (it use renderer) or as alternative nativeElement.value.



        And FormControl's setValue() with emitModelToViewChange = false for set FormControl value.



        In template



        <input [formControl]="ctrlF" #ctrlD="ngForm">


        In controller



         @ViewChild('ctrlD', {read: FormControlDirective})
        ctrlD :FormControlDirective
        ...
        this.ctrlD.valueAccessor.writeValue("display value")
        this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
        emitModelToViewChange: false
        })


        planker







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 2 at 9:51









        alarclalarcl

        444




        444






























            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%2f53978720%2fformcontrol-display-value%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

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas