使用ngModel指令以角度形式获取所有值

Question

我正在尝试使用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);
}

Answer 1

我已经使用ReactiveForm实现了相同的功能

这里是stackblitz链接