Question

我想在单击“保存”按钮后重置表单（addUserForm）。我使用表单输入用户数据的模态，我使用此表单编辑数据并创建新数据并给表单标志创建和更新以区分它们，当我重新加载页面并单击打开模式以输入新用户它很清楚但是当我首先点击编辑按钮然后新表格我找到了我编辑的数据。

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>

Answer 1

由于缺少某些部分，我无法运行您的代码，但是您应该能够将表单重置为：

WHERE Docs.Filename IN( 
    SELECT * FROM dbo.FileNames( 'MyFileName.doc, MyOtherFileName.doc' )
)

Answer 2

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

组件中的

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

this.organisationSignUp.reset();
}

这是处理后清除和重置表单字段的方法

保存Angular 4后重置表单

2 个答案: