making a generic Modal with Angular-CodePudding

I want to make a generic Modal,so if I click add button I want the modal to open with Add functionality and if I click the edit button, I want the same modal but with edit functionnalities..like change the order

Here is my code

<c-row>
        <c-col>
          <button style="float: right;" cButton color="primary" (click)="onAddFamille()">Add Famille</button> //Add button
        </c-col>
      </c-row>
      <c-row>
          <table [striped]="true" cTable>
            <thead>
            <tr>
            <th scope="col">ID</th>
            <th scope="col">Libelle</th>
            <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let famille of familles">
            <th scope="row">{{famille.id}}</th>
            <td>{{famille.libelle}}</td>
            <td>
              <button cButton color="primary"  (click)="onUpdate(famille.id)">
                <svg cIcon name="cilPen" size="sm" title="Numbered List Icon"></svg>
              </button>
              |
              <button cButton color="danger">
                <svg cIcon name="cilTrash" size="sm" title="Numbered List Icon"></svg>
              </button>
            </td>
            </tr>
            </tbody>
            </table>

      </c-row>
    </c-card-body>
  </c-card>
</div>
//Modal

<c-modal id="liveDemoModal" [visible]="visible" (visibleChange)="handleLiveDemoChange($event)">
<c-modal-header>
<h2 cModalTitle>Modal title</h2>
<button (click)="toggleLiveDemo()" cButtonClose></button>
</c-modal-header>
<c-modal-body>
  <label cLabel for="exampleFormControlInput1">Libelle</label>
  <c-input-group >
    <input
       aria-describedby="addon-wrapping"
       aria-label="Libelle"
       cFormControl
       placeholder="Libelle"
       id="libelle"
       sizing="lg"
       [(ngModel)] = "famille.libelle"
       name="libelle"
      />
    </c-input-group>
</c-modal-body>
<c-modal-footer>
<button (click)="toggleLiveDemo()" cButton color="secondary">
Close
</button>
<button cButton color="primary" (click)="updateFamille()">Save changes</button>
</c-modal-footer>
</c-modal>

and here is my Ts code

onUpdate(famille:any){
    this.visible = !this.visible;
    this.familleService.getFamille(famille)
    .subscribe(
      (successResponse) =>{
        this.famille =  successResponse;
      },
      (errorResponse) =>{
        console.log(errorResponse)
      }
    )

  }

onAddFamille( ){
    this.visible = !this.visible;

  }

the update is working very well but if I click edit button and then click the add button the form comes with th name of the last clicked edit input

CodePudding user response：

You should call delete this.famille in the onAddFamille, otherwise the previously stored famille is still set.

CodePudding user response：

Set null to famille variable on add click

  onAddFamille( ){
    this.visible = !this.visible;
    this.famille = null; // or this.famille = undefined;
  }

Also, check null in input value binding

     <input
       aria-describedby="addon-wrapping"
       aria-label="Libelle"
       cFormControl
       placeholder="Libelle"
       id="libelle"
       sizing="lg"
       [(ngModel)] = "famille?.libelle"
       name="libelle"
      />
      <!--Note ? in famille?.libelle-->