fetch all values in form using ngModel directive in angular

Question

I am trying to fetch all the values which are in form using ngModel but some how I am getting only first text boxes values. Not getting textbox values added on click of button.

Example: stackblitz

html:

<form #profileSetUpForm="ngForm" (ngSubmit)="saveData(profileSetUpForm)" class="form ">
                                        <div class="row m-0">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label">
                                                Tab Name
                                            </div>
                                            <div class="col-lg-4 col-md-12 col-sm-12 col-12 mt-top-5">
                                                <input type="text" [(ngModel)]="tabName" name="configtabName" value={{tab}} placeholder="Tab Name" class="common-input form-control">
                                            </div>
                                        </div>

                                        <div class="row m-0 inside-tab-divier"></div>

                                        <div class="tab-content">

                                            <div class="row m-0 mt-top-10 tiledata tile">
                                                <div class="col-lg-1 col-md-1 col-sm-1 col-12 tab-number">
                                                    1
                                                </div>
                                                <div class="col-lg-4 col-md-12 col-sm-12 col-12 pr-0">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label">
                                                        Dashboard Name
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
                                                        <input type="text" [(ngModel)]="dashboardName1" name="configdashboardName-1" placeholder="Dashboard Name" class="common-input form-control">
                                                    </div>

                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">
                                                        Description
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
                                                        <textarea rows="1" [(ngModel)]="description1" name="configdescription-1" placeholder="Description" class="common-textarea form-control"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-5 col-md-12 col-sm-12 col-12">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label">
                                                        Where do you want the dashboard to link to?
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
                                                        <input type="hidden" [(ngModel)]="selectedLinkTo1" name="configselectedLinkTo-1" />
                                                        <a id="tableau-1" (click)="linkTo('tableau',1)" class="btn-link-group border-right-0 first-btn" mat-button>Tableau</a>
                                                        <a id="profilelink-1" (click)="linkTo('profilelink',1)" class="btn-link-group border-right-0" mat-button>Profile link</a>
                                                        <a id="weblink-1" (click)="linkTo('weblink',1)" class="btn-link-group last-btn" mat-button>Weblink</a>
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">
                                                        Link
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5">
                                                        <input type="text" [(ngModel)]="addedLink1" name="configaddedLink-1" placeholder="Link" class="common-input form-control">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row" #appendNewTile id="appendNewTile{{tab}}"></div>

                                            <div class="row m-0 mt-top-10 tile add-other-tile-div">
                                                <div class="col-lg-4 col-md-12 col-sm-12 col-12"></div>
                                                <div class="col-lg-4 col-md-12 col-sm-12 col-12 text-center">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12 add-tile-icon">
                                                        <i (click)="addTile(tab)" class="fas fa-plus-circle default-cursor"></i>
                                                    </div>
                                                    <div class="col-lg-12 add-other-tile">
                                                        Add Another tile
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-12 col-sm-12 col-12"></div>
                                            </div>

                                        </div>

                                        <div class="m-0 mt-top-10 text-right">
                                            <button mat-button class="save-common-btn" type="submit">Save</button>
                                        </div>
                                    </form>

On click of addTile below html will be added which is in new component:

<div id="tiledata-{{tabName}}-{{tileNumber}}" class="row m-0 mt-top-10 tiledata tile">
    <div class="col-lg-1 col-md-1 col-sm-1 col-12 tab-number">
        {{tileNumber}}
    </div>
    <div class="col-lg-4 col-md-12 col-sm-12 col-12 pr-0">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label">
            Dashboard Name
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
            <input type="text" [(ngModel)]="dashboardName2" name="configdashboardName-{{tileNumber}}" placeholder="Dashboard Name" class="common-input form-control">
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">
            Description
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
            <textarea rows="1" [(ngModel)]="description2" name="configdescription-{{tileNumber}}" placeholder="Description" class="common-textarea form-control"></textarea>
        </div>
    </div>
    <div class="col-lg-5 col-md-12 col-sm-12 col-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label">
            Where do you want the dashboard to link to?
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5 pr-0">
            <input type="hidden" [(ngModel)]="selectedLinkTo2" name="configselectedLinkTo-{{tileNumber}}" />
            <a id="tableau-1" (click)="linkTo('tableau',1)" class="btn-link-group border-right-0 first-btn" mat-button>Tableau</a>
            <a id="profilelink-1" (click)="linkTo('profilelink',1)" class="btn-link-group border-right-0" mat-button>Profile link</a>
            <a id="weblink-1" (click)="linkTo('weblink',1)" class="btn-link-group last-btn" mat-button>Weblink</a>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">
            Link
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5">
            <input type="text" [(ngModel)]="addedLink2" name="configaddedLink-{{tileNumber}}" placeholder="Link" class="common-input form-control">
        </div>
    </div>
</div>

ts:

postData: any[]=[];
  saveData(form : NgForm) {
    this.postData = form.value;
    // console.log('postdata:', this.postData);
    let jsonData = this.postData;
    console.log('jsonData', jsonData);
}

Please provide the steps to reproduce the issue in stackblitz — Suhas Parameshwara
– Suhas Parameshwara, Commented Dec 13, 2019 at 9:12
@ng-suhas add data and then click on append to First button, again add data and see in console. — Pathik Vejani
– Pathik Vejani, Commented Dec 13, 2019 at 9:15
Also, please try to come up with a light example that contains only your issue. Avoid dumping your whole code like that or I suspect not a lot of people will take the time to dig into it if it's not isolated — maxime1992
– maxime1992, Commented Dec 13, 2019 at 9:52
@maxime1992 I got your point but I want to explain whole scenario that's why I created stackblitz. — Pathik Vejani
– Pathik Vejani, Commented Dec 13, 2019 at 9:53

Tarun Rawat · Accepted Answer · 2019-12-15 05:15:29Z

1

I have implemented same thing using ReactiveForm in angular

Here is stackblitz link

answered Dec 15, 2019 at 5:15

Tarun Rawat

2544 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pathik Vejani Over a year ago

Pls try on this: stackblitz.com/edit/get-dynamic-added-component-values

Tarun Rawat Over a year ago

Please have a look stackblitz.com/edit/angular-rd1vkp

Pathik Vejani Over a year ago

How to perform edit feature? Let's assume you have already data available for let say 2 tabs with inside tab data. like:

[ {    "uniqueid": "123",    "tabName": "0",    "insideData": [       {          "name": "D1",          "email": "D1 Description",       },       {          "name": "D2",          "email": "D2 Description",       }    ] }, {    "uniqueid": "321",    "tabName": "1",    "insideData": [       {          "name": "D2",          "email": "D2 Description",       },       {          "name": "D3",          "email": "D3 Description",       }    ] } ]

Collectives™ on Stack Overflow

fetch all values in form using ngModel directive in angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related