Angular 使用ngModel指令获取表单中的所有值
我正在尝试使用Angular 使用ngModel指令获取表单中的所有值,angular,angular-ngmodel,angular-components,angular-forms,angularjs-ng-form,Angular,Angular Ngmodel,Angular Components,Angular Forms,Angularjs Ng Form,我正在尝试使用ngModel获取表单中的所有值，但有些方法仅获取第一个文本框值。单击按钮时未添加文本框值 例如： html: <form #profileSetUpForm="ngForm" (ngSubmit)="saveData(profileSetUpForm)" class="form "> <div class="row m-0">
ngModel<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>
postData: any[]=[];
saveData(form : NgForm) {
this.postData = form.value;
// console.log('postdata:', this.postData);
let jsonData = this.postData;
console.log('jsonData', jsonData);
}
<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>
postData: any[]=[];
saveData(form : NgForm) {
this.postData = form.value;
// console.log('postdata:', this.postData);
let jsonData = this.postData;
console.log('jsonData', jsonData);
}
我在angular中使用ReactiveForm实现了相同的东西
以下是链接请提供在中重现问题的步骤stackblitz@ng-suhas添加数据，然后单击“附加到第一个”按钮，再次添加数据并在控制台中查看。@ng suhas您得到了吗？另外，请尝试给出一个仅包含您的问题的简单示例。避免像那样丢弃你的全部代码，否则我怀疑没有多少人会花时间去挖掘它isolated@maxime1992我明白你的意思，但我想解释一下整个场景，这就是我创建stackblitz的原因。请尝试一下：请看看如何执行
编辑[{“uniqueid”：“123”，“tabName”：“0”，“insideData”：[{“name”：“D1”，“email”：“D1 Description”，}，{“name”：“D2”，“email”：“D2 Description”，}]}，{“uniqueid”：“321”，“tabName”：“1”，“insideData”：[{“name”：“D2”，“email”：“D2描述”，}，{“名称”：“D3”，“电子邮件”：“D3描述”，}]}]