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);
}
I have implemented same thing using ReactiveForm in angular
Here is stackblitz link