Question

我有一张表格。有一个添加更多按钮每次我点击添加更多，我将一个类的新实例推送到一个数组。我还有一个删除行功能，负责从数组中删除添加的项目。然后我在数组上有一个ngFor循环，它可以正常工作，但如果我添加3行然后尝试删除第一行然后单击添加更多按钮，那么第二行和第三行的数据将变为空，但它们仍然存在于他们的模型中。（ngModel）

<form  #manageEmailsForm="ngForm" name="manageEmailsForm">
    <div class="row" *ngFor="let item of partners;let x = index">
        {{item.email|json}}
        {{j}}
        <div class="col-md-4">
            <mat-input-container>
                <input matInput
                       placeholder="email"
                       [name]="'piEmail'+x"

                       #piEmail="ngModel"
                       [(ngModel)]="item.email" >
                <mat-error
                        *ngIf="piEmail.errors && !piEmail.errors['required'] && piEmail.errors['email']">
                    {{"system-user.piemail format is incorrect"|translate}}
                </mat-error>
            </mat-input-container>


        </div>
        <div class="col-md-2">
            <button mat-icon-button (click)="deletePartner(x)">
                <mat-icon>delete</mat-icon>
            </button>
        </div>
    </div>
</form>

我的删除和添加按钮：

    deletePartner(index) {
       this.partners.splice(index, 1);
    }
    addAnotherPartner() {
      this.partners.push(new Partner());
    }

Answer 1

这可能是意外行为，因为您的表单默认情况下您的按钮是提交类型。

在<form> </form>内声明哪些按钮并非意图提交时确保它们被声明为按钮，否则使用提交事件如行为

进行处理

在示例中

<button mat-icon-button type="button" (click)="deletePartner(x)">
    <mat-icon>delete</mat-icon>
  </button>

如果你想测试这个理论，不做任何改变，只需在你的表单中添加一个onSubmit（）函数

<form  #manageEmailsForm="ngForm" 
       name="manageEmailsForm" 
       (ngSubmit)="onSubmit(manageEmailsForm)">

Angular：添加更多按钮

1 个答案: