使用反应式 Forms 方法更新表中的值

Question

It's a bit difficult to give a simple example...

I have a model and its price displayed and an edit button in a table, when I click on the edit button, a Modal is displayed to modify the price.

In the Modal, there is an Input and a Validate Button, in the Input, the initial Price is displayed. I managed to display the initial price with the Get SetValue method of Reactive Forms.

The problem is that I would like when I modify the price and I validate it, it is displayed in the table which contained the initial price.

Here are some screenshots to illustrate the problem:

HTML Code : 

    <table class="table table-dark mb-3">
    <thead>
      <tr>
        <th scope="col">Modèles</th>
        <th scope="col">Prix Unitaire ( U )</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody *ngFor="let modele of modeles; let i = index">
      <tr>
        <td>Model {{ modele.idModele }} ( {{ modele.modele }} )</td>
        <td>{{ modele.prix }} €</td>
        <td>
          <a
            class="btn btn-outline-light"
            (click)="editPrixModele(i)"
            data-toggle="modal"
            data-target="#modalPrixModele"
          >
            <i class="far fa-edit"></i
          ></a>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Modal Edition Prix Model Start -->

  <div
    class="modal fade"
    id="modalPrixModele"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalPrixModele">Edition Du Prix :</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form [formGroup]="prixModeleForm">
            <label for="prixModele">Prix Modele : </label>
            <input
              type="text"
              class="form-control"
              placeholder="Entrer le Prix : ( € )"
              formControlName="prixModele"
            />
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Fermer
          </button>
          <button
            type="button"
            class="btn btn-primary"
            (click)="validatePrixModele()"
          >
            Enregistrer
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Edition Prix Model End -->



TS File : 



export class PrixOptionsComponent implements OnInit {
  modeles = [];
  travaux = [];
  batiments = [];
  nbrEtages = [];
  chargeNominale = [];
  nbrPersonnes = [];
  dimensionCabine = [];

  prixModeleForm: FormGroup;

  constructor(
    private prixOptionsService: PrixOptionsService,
    private formbuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.prixOptionsService.getModeles().subscribe(
      (data: any) => {
        this.modeles = data;
      },
      (error) => {
        console.error(error);
      },
      () => {
        console.log("observable modele success");
      }
    );
    this.initPrixModeleForm();
  }

  initPrixModeleForm() {
    this.prixModeleForm = this.formbuilder.group({
      prixModele: [""],
    });
  }

  editPrixModele(index) {
    console.log(this.modeles[index]);
    this.prixModeleForm.get("prixModele").setValue(this.modeles[index].prix);
  }

Thank you in advance,

Answer 1

I would change somes little things: In HTML, i would pass, the modele itself, instead of the index:

<a
   class="btn btn-outline-light"
   (click)="editPrixModele(modele)"
   data-toggle="modal"
   data-target="#modalPrixModele"
  >
    <i class="far fa-edit"></i>
</a>

I would keep this modele, into a property editModele:

export class PrixOptionsComponent implements OnInit {
  ...
  editModele: any = null;
  ...
}

So we need to change the editPrixModele function:

editPrixModele(modele) {   
  this.editModele = modele;
  this.prixModeleForm.get("prixModele").setValue(this.editModele);

}

finally, in the validateForm function:

validatePrixModele() {
   // Check here, if value is correct ....

   this.editModele.prix = this.prixModeleForm.value.prixModele;
   this.editModele = null;

   //Close your modal ....

   this.prixModeleForm.reset();
}