Angular 7-防止在提交时删除其他字段数据

Question

我有一个表单，其中包含通过循环显示的多个TEXTAREA元素。每个TEXTAREA都有它自己的提交按钮，并且值是正确提交的。但是如果我在textarea-1中输入一些文本但没有提交，那么我在textarea-2中编写一些文本并单击submit按钮，它将提交相关内容，但也会刷新/删除textarea-1中的文本。我希望textarea-1中的文本在提交的按钮单击之前一直保留在那里。我用谷歌搜索了一下，但找不到我要搜索的确切内容。

代码如下：

 <form #f="ngForm" novalidate>
  <div class="single-field" *ngFor="let project of projectsArr; let i = index;" #ival>
     <mat-form-field>
          <textarea matInput class="md-textarea form-control dc-text-field__input mui-textfield mui-textfield--float-label" rows="3" cols="40" name="info{{i}}" [(ngModel)]="projectsArr[i].info"></textarea>
      </mat-form-field>
 </div>
 <mat-card-actions>
   <button class="mat-button" name="submitButton" #submitButton id="button{{i}}" type="button" mat-raised-button color="primary" [disabled]="!projectsArr[i].info" (click)="saveInfo(info, i)">
    <span class="mat-button__label">Save Now</span>
   </button>
</mat-card-actions>
</form>

//保存更新方法

saveUpdate(proj, index) {
if(this.isLoading){
  return;
}
this.isLoading  = true;

if (proj.hasOwnProperty('progress')) {
  this.fs.removeMyTodaysUpdate(this.today.toDateString(), proj.name,  this.currentUser.email).then(() => {
    this.storeUpdate(proj, index);
  }).catch(err=>{
    this.isLoading = false;
  })
} else {
  this.storeUpdate(proj, index);     
}

}

Answer 1

请尝试仅创建one submit button in each form and change button type to submit。

请找到参考代码。

<form *ngFor="let project of projectsArr; let i = index;">
        <mat-form-field>
           <textarea matInput class="md-textarea form-control dc-text-field__input mui-textfield mui-textfield--float-label" rows="3" cols="40" name="info{{i}}" [(ngModel)]="projectsArr[i].info"></textarea>
        </mat-form-field>

         <mat-card-actions>
           <button class="mat-button" name="submitButton" #submitButton id="button{{i}}" type="submit" mat-raised-button color="primary" [disabled]="!projectsArr[i].info" (click)="saveInfo(info, i)">
            <span class="mat-button__label">Save Now</span>
           </button>
        </mat-card-actions>
</form>