Angular：添加更多按钮-Java 学习之路

我有一张表格 . 有一个添加更多按钮每次我点击添加更多，我将一个类的新实例推送到一个数组 . 我还有一个删除行功能，负责从数组中删除添加的项目 . 然后我在数组上有一个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());
    }

1 回答

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

当声明 <form> </form> 内的按钮时，'t meant to submit make sure they'被声明为按钮，否则使用提交事件处理行为

在例子中
```
<button mat-icon-button type="button" (click)="deletePartner(x)">
    <mat-icon>delete</mat-icon>
  </button>
```
如果你想测试这个理论，不做任何改变，只需在表单中添加一个onSubmit（）函数即可
```
<form  #manageEmailsForm="ngForm" 
       name="manageEmailsForm" 
       (ngSubmit)="onSubmit(manageEmailsForm)">
```
回复于 2024-04-30T01:37:05+08:00

Angular：添加更多按钮

1 回答

相关问题