保存角度後重置表格4

我想單擊保存按鈕後重置表單（addUserForm）。我做了一個窗體模式輸入用戶數據，我用這個表單編輯數據和創建新的數據，並給表單標誌創建和更新來區分它們，當我重新加載頁面並單擊以打開輸入新用戶的模式很明顯，但是當我點擊編輯按鈕，然後新的表單我找到了我編輯的數據。保存角度後重置表格4

onSaveUser功能：

onUserSave(user: User){ 
    let newUser = { 
     name: user.name, 
     role: user.role, 
     email: user.email, 
     password: user.password, 
    } 
    if(this.flag == 'create'){ 
    this.addUserForm.reset(); 
     this.dataStorageService.storeUsers(newUser); 
    }else{ 
     this.dataStorageService.editUser(this.userId, newUser); 
    } 
    this.modalRef.close(); 
    this.addUserForm.reset(); 
}

這是組件的HTML它的形式：

<div [@routerTransition]> 
    <app-page-header [heading]="' users '" [icon]="'fa-users'"></app-page-header> 

    <a style="margin-right: 15px; cursor:pointer; padding: 0px;" role="button"> 
    <span (click)="open(content, 'create')"> add Users </span> 
     <i class="fa fa-user-plus" style="color: red;"></i> 
     <ng-template #content let-c="close" let-d="dismiss"> 
        <!-- pop up --> 
      <div class="modal-dialog modal-lg" dir="rtl"> 
      <div class="modal-header "> 
       <h4 class="modal-title" style="color:red;">add new user</h4> 
       <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      </div> 
          <!-- pop up body --> 
      <div class="modal-body"> 
      <form [formGroup]="addUserForm" (ngSubmit)="onSubmit(t)" #t="ngForm"> 
      <div class="row"> 
       <div class="form-group" class="col-lg-6"> 
        <label > username </label> 
        <input class="form-control text-line" type="text" id="name" formControlName="name" [(ngModel)]='name' required/> 
        <br /> 

        <label class="padd"> password </label> 
       <input class="form-control text-line" type="password" id="password" formControlName="password" [(ngModel)]='password' required/> 
        </div> 

       <div class="form-group" class="col-lg-6"> 
       <label> Email </label> 
       <input class="form-control text-line" type="email" id="email" formControlName="email" [(ngModel)]='email' required /> 
       <br /> 

       </div> 
       <!-- modal footer --> 
      <div class="modal-footer"> 
      <button type="submit" class="btn btn-success" (click)="onUserSave(addUserForm.value,t);" style="margin: 20px;" [disabled]="!t.valid" > حفظ </button> 
      <button type="button" class="btn btn-danger" (click)="c('Close click')"> cancel</button> 
        </div> 
        </form> 
         <br /> 

        </div> 
       </div> 
      </ng-template> 
     </a> 

      <hr> 

      <table class="table table-hover table-condensed text-center"> 
        <thead > 
          <tr class="text-center" style="background-color: #eef4f7; "> 
            <th > # </th> 

            <th > username          </th> 

            <th > 
              email 
            </th> 

            <th > 
              edit 
            </th> 

          </tr> 
        </thead> 
        <tbody> 

          <tr *ngFor="let user of users"> 
            <td> 
              # 
            </td> 

            <td> 
              {{user.name}} 
            </td> 

            <td> 
              {{user.email}} 
            </td> 

            <td> 
        &nbsp; 
        <i class="fa fa-pencil-square-o fa-lg" style="cursor: pointer; color:#008000;" (click)="open(content, 'update', user)"></i>      </td> 
          </tr> 
        </tbody> 
      </table>

來源

2017-08-26 Aya Abdelaziz

你是如何創建的形式（模板驅動或模型驅動）？你能展示模板嗎？ –

[提交後重新設置Angular 2中的表單]可能的副本（https://stackoverflow.com/questions/36655922/resetting-a-form-in-angular-2-after-submit） – Kuncevic

@CristianTraina我編輯並添加表單 –

我不能因爲有一些來運行代碼缺少零件，但是您應該可以將表格重置爲：

..... (click)="onUserSave(addUserForm.value,t); addUserForm.reset()" .....

來源

2017-08-26 12:03:17 Vega

同樣的問題，當我點擊編輯按鈕，然後取消，然後添加新的用戶，我發現窗體有以前的值編輯部分 –

因爲功能保存不起作用，你必須先解決它。 – Vega

我測試過，但這不是問題，它不工作，保存按鈕讓我添加另一列與新的數據，它的工作，我不認爲與onSaveUser函數的問題。 –

<form [formGroup]="organisationSignUp" novalidate (submit)="OrganisationSignUp()"> 
</form>

在組件

OrganisationSignUp(){ 
// process form 
.... 
.... 
// After done processing ...clear form like this 

this.organisationSignUp.reset(); 
}

那就是如何處理後，要清除和重置表單字段

來源

2017-08-26 13:43:55 Lekens

保存角度後重置表格4

回答

相關問題