在 angular 中使用 ngModel 指令获取表单中的所有值

Question

我正在尝试使用 ngModel 获取表单中的所有值，但我如何只获取第一个文本框值。单击按钮时未添加文本框值。

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>

单击 html 下面的 addTile 将在新组件中添加：

<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

我在 angular

中使用 ReactiveForm 实现了同样的事情

这里是stackblitzlink

在 angular 中使用 ngModel 指令获取表单中的所有值

fetch all values in form using ngModel directive in angular

angularjs-ng-form

angular-ngmodel

angular-components

angular

angular-forms