使用ngModel指令以角度形式获取所有值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ngModel指令以角度形式获取所有值相关的知识，希望对你有一定的参考价值。
我正在尝试使用ngModel来获取所有形式上的值，但有些方法是我仅获取第一个文本框值。单击按钮后未获得添加的文本框值。
示例：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>
单击addTile下方的html将会添加到新组件中：
<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);
}
答案
我已经使用ReactiveForm实现了相同的功能
这里是stackblitz链接
以上是关于使用ngModel指令以角度形式获取所有值的主要内容，如果未能解决你的问题，请参考以下文章
使用 formControlName 和 ngModel 的角度 6 警告