Resetting Form after Save Angular 4

Question

i want to reset form (addUserForm) after clicking Save button . i made a modal with form to enter user data , i user this form for editing data and create new data and give the form flag Create and Update to distinguish between them , when i reload the page and click to open the modal for entering new user it's clear but when i click edit button firstly then new form i found the data which i edited.

onSaveUser function:

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();
}

This is the html of the component which has the form :

<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

I wasn't able to run your code as there are some missing parts, but you should be able to reset the form as :

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

Answer 2

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

in the component

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

this.organisationSignUp.reset();
}

that is how to clear and reset form field after processing