- 首页
- 其他开发
- 使用angular中的ngModel指令获取表单中的所有值
使用angular中的ngModel指令获取表单中的所有值
[英] fetch all values in form using ngModel directive in angular
本文介绍了使用angular中的ngModel指令获取表单中的所有值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 ngModel
获取表单中的所有值,但我如何仅获取第一个文本框值.单击按钮时未添加文本框值.
示例:stackblitz
html:
<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 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 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">仪表盘名称
<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 class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">描述
<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 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">您希望仪表板链接到哪里?
<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>个人资料链接</a><a id="weblink-1" (click)="linkTo('weblink',1)" class="btn-link-group last-btn" mat-button>Weblink</a>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">关联
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5"><input type="text" [(ngModel)]=" addedLink1" name="config addedLink-1" placeholder="Link" class="common-input form-control">
<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 class="col-lg-12 add-other-tile">添加另一个瓷砖
<div class="col-lg-4 col-md-12 col-sm-12 col-12"></div>
<div class="m-0 mt-top-10 text-right"><button mat-button class="save-common-btn" type="submit">保存</button>
</表单>
点击 addTile
下面的 html 将被添加到新组件中:
<div class="col-lg-1 col-md-1 col-sm-1 col-12 tab-number">{{tileNumber}}
<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">仪表盘名称
<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 class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">描述
<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 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">您希望仪表板链接到哪里?
<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>个人资料链接</a><a id="weblink-1" (click)="linkTo('weblink',1)" class="btn-link-group last-btn" mat-button>Weblink</a>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 profile-input-label mt-top-20">关联
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt-top-5"><input type="text" [(ngModel)]=" addedLink2" name="config addedLink-{{tileNumber}}" placeholder="Link" class="common-input form-control">
ts:
postData: any[]=[];保存数据(形式:NgForm){this.postData = form.value;//console.log('postdata:', this.postData);让 jsonData = this.postData;console.log('jsonData', jsonData);}
解决方案
我在 angular 中使用 ReactiveForm 实现了同样的事情
这是stackblitz 链接
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
这篇关于使用angular中的ngModel指令获取表单中的所有值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文