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

Profile

Please provide the steps to reproduce the issue in stackblitz – Obsession

@ng-suhas add data and then click on append to First button, again add data and see in console. – Profile

@ng-suhas did you get that? – Profile

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 – Systematism

@Systematism I got your point but I want to explain whole scenario that's why I created stackblitz. – Profile

@Systematism there is like, need to add component data (html) on click of one icon and then on save, need to fetch all entered values. – Profile

Sorry there's way too much to look into there. Without minimal repro I won't be able to help – Systematism

what exactly you want me to change? @Systematism – Profile

@Systematism stackblitz.com/edit/get-dynamic-added-component-values-ulaj2k see this. add data and then click on append to First button, again add data and see in console – Profile

@Systematism I have added needed code in stackblitz – Profile

Answer 1

I have implemented same thing using ReactiveForm in angular

Here is stackblitz link

Waterside

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

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

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", } ] } ] – Profile