Adding employee phone from form to table












0















I have this template



<form [formGroup]="myForm">

<div formArrayName="phones">

<div *ngFor="let phone of phoneForms.controls; let i=index"
[formGroupName]="i">

<input formControlName="area">
<input formControlName="prefix">
<input formControlName="line">

<button (click)="deletePhone(i)">Delete</button>

</div>
</div>

<button (click)="addPhone()">Add Phone Number</button>

</form>


and this is the controller code



ngOnInit() {
this.myForm = this.fb.group({
email: '',
phones: this.fb.array()
})

}

get phoneForms() {
return this.myForm.get('phones') as FormArray
}

addPhone() {

const phone = this.fb.group({
area: ,
prefix: ,
line: ,
})

this.phoneForms.push(phone);
}

deletePhone(i) {
this.phoneForms.removeAt(i)
}


This how it looks



But i want to show form fields only once and what ever the phone no we add should be shown below in data table or normal table with edit and delete button such that if edit is clicked that particular data gets populated in the fields above










share|improve this question

























  • Please post your code

    – Flightdoc5242
    Dec 29 '18 at 11:42






  • 1





    This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

    – Bert Verhees
    Dec 29 '18 at 11:50











  • Your edited question makes sense to me now. :-)

    – johey
    Dec 29 '18 at 13:17
















0















I have this template



<form [formGroup]="myForm">

<div formArrayName="phones">

<div *ngFor="let phone of phoneForms.controls; let i=index"
[formGroupName]="i">

<input formControlName="area">
<input formControlName="prefix">
<input formControlName="line">

<button (click)="deletePhone(i)">Delete</button>

</div>
</div>

<button (click)="addPhone()">Add Phone Number</button>

</form>


and this is the controller code



ngOnInit() {
this.myForm = this.fb.group({
email: '',
phones: this.fb.array()
})

}

get phoneForms() {
return this.myForm.get('phones') as FormArray
}

addPhone() {

const phone = this.fb.group({
area: ,
prefix: ,
line: ,
})

this.phoneForms.push(phone);
}

deletePhone(i) {
this.phoneForms.removeAt(i)
}


This how it looks



But i want to show form fields only once and what ever the phone no we add should be shown below in data table or normal table with edit and delete button such that if edit is clicked that particular data gets populated in the fields above










share|improve this question

























  • Please post your code

    – Flightdoc5242
    Dec 29 '18 at 11:42






  • 1





    This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

    – Bert Verhees
    Dec 29 '18 at 11:50











  • Your edited question makes sense to me now. :-)

    – johey
    Dec 29 '18 at 13:17














0












0








0








I have this template



<form [formGroup]="myForm">

<div formArrayName="phones">

<div *ngFor="let phone of phoneForms.controls; let i=index"
[formGroupName]="i">

<input formControlName="area">
<input formControlName="prefix">
<input formControlName="line">

<button (click)="deletePhone(i)">Delete</button>

</div>
</div>

<button (click)="addPhone()">Add Phone Number</button>

</form>


and this is the controller code



ngOnInit() {
this.myForm = this.fb.group({
email: '',
phones: this.fb.array()
})

}

get phoneForms() {
return this.myForm.get('phones') as FormArray
}

addPhone() {

const phone = this.fb.group({
area: ,
prefix: ,
line: ,
})

this.phoneForms.push(phone);
}

deletePhone(i) {
this.phoneForms.removeAt(i)
}


This how it looks



But i want to show form fields only once and what ever the phone no we add should be shown below in data table or normal table with edit and delete button such that if edit is clicked that particular data gets populated in the fields above










share|improve this question
















I have this template



<form [formGroup]="myForm">

<div formArrayName="phones">

<div *ngFor="let phone of phoneForms.controls; let i=index"
[formGroupName]="i">

<input formControlName="area">
<input formControlName="prefix">
<input formControlName="line">

<button (click)="deletePhone(i)">Delete</button>

</div>
</div>

<button (click)="addPhone()">Add Phone Number</button>

</form>


and this is the controller code



ngOnInit() {
this.myForm = this.fb.group({
email: '',
phones: this.fb.array()
})

}

get phoneForms() {
return this.myForm.get('phones') as FormArray
}

addPhone() {

const phone = this.fb.group({
area: ,
prefix: ,
line: ,
})

this.phoneForms.push(phone);
}

deletePhone(i) {
this.phoneForms.removeAt(i)
}


This how it looks



But i want to show form fields only once and what ever the phone no we add should be shown below in data table or normal table with edit and delete button such that if edit is clicked that particular data gets populated in the fields above







angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 29 '18 at 13:10







user3057024

















asked Dec 29 '18 at 11:41









user3057024user3057024

112




112













  • Please post your code

    – Flightdoc5242
    Dec 29 '18 at 11:42






  • 1





    This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

    – Bert Verhees
    Dec 29 '18 at 11:50











  • Your edited question makes sense to me now. :-)

    – johey
    Dec 29 '18 at 13:17



















  • Please post your code

    – Flightdoc5242
    Dec 29 '18 at 11:42






  • 1





    This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

    – Bert Verhees
    Dec 29 '18 at 11:50











  • Your edited question makes sense to me now. :-)

    – johey
    Dec 29 '18 at 13:17

















Please post your code

– Flightdoc5242
Dec 29 '18 at 11:42





Please post your code

– Flightdoc5242
Dec 29 '18 at 11:42




1




1





This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

– Bert Verhees
Dec 29 '18 at 11:50





This question is not clear, it is impossible to give an answer, and it is unlikely that editing will improve it to an acceptable level. Please write your question again, and show us what you tried, and what went wrong. You can then remove this question.

– Bert Verhees
Dec 29 '18 at 11:50













Your edited question makes sense to me now. :-)

– johey
Dec 29 '18 at 13:17





Your edited question makes sense to me now. :-)

– johey
Dec 29 '18 at 13:17












1 Answer
1






active

oldest

votes


















0














Maybe you could achieve the desired functionality like this:




  • in addition to your editable template, make a readonly version

  • with ngIf, always show the readonly version except when the current phone is being edited

  • to keep track which phone is being edited, just use a local variable (e.g. the index of the phone or an ID if available)

  • of course the local variable would be set via an edit button that you put in the readonly template


Does this make sense? I guess you don't need example code for this, it looks kind of straight forward?



Good luck!






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%2f53969184%2fadding-employee-phone-from-form-to-table%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














    Maybe you could achieve the desired functionality like this:




    • in addition to your editable template, make a readonly version

    • with ngIf, always show the readonly version except when the current phone is being edited

    • to keep track which phone is being edited, just use a local variable (e.g. the index of the phone or an ID if available)

    • of course the local variable would be set via an edit button that you put in the readonly template


    Does this make sense? I guess you don't need example code for this, it looks kind of straight forward?



    Good luck!






    share|improve this answer




























      0














      Maybe you could achieve the desired functionality like this:




      • in addition to your editable template, make a readonly version

      • with ngIf, always show the readonly version except when the current phone is being edited

      • to keep track which phone is being edited, just use a local variable (e.g. the index of the phone or an ID if available)

      • of course the local variable would be set via an edit button that you put in the readonly template


      Does this make sense? I guess you don't need example code for this, it looks kind of straight forward?



      Good luck!






      share|improve this answer


























        0












        0








        0







        Maybe you could achieve the desired functionality like this:




        • in addition to your editable template, make a readonly version

        • with ngIf, always show the readonly version except when the current phone is being edited

        • to keep track which phone is being edited, just use a local variable (e.g. the index of the phone or an ID if available)

        • of course the local variable would be set via an edit button that you put in the readonly template


        Does this make sense? I guess you don't need example code for this, it looks kind of straight forward?



        Good luck!






        share|improve this answer













        Maybe you could achieve the desired functionality like this:




        • in addition to your editable template, make a readonly version

        • with ngIf, always show the readonly version except when the current phone is being edited

        • to keep track which phone is being edited, just use a local variable (e.g. the index of the phone or an ID if available)

        • of course the local variable would be set via an edit button that you put in the readonly template


        Does this make sense? I guess you don't need example code for this, it looks kind of straight forward?



        Good luck!







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 29 '18 at 13:22









        joheyjohey

        388315




        388315






























            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%2f53969184%2fadding-employee-phone-from-form-to-table%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

            compose and upload a new article using a custom form

            How to correct the classpath of spring boot application so that it contains a single, compatible version of...