Modifier la valeur par formulaire dans Angular 2

Question

J'ai un problème avec la valeur de mise à jour dans ma forme modale. Je veux mettre à jour la valeur d'entrée quand je clique sur sauvegarder, mais sa mise à jour quand j'écris quelque chose finit par fermer la fenêtre. Ceci est mon code:

modal edit.html:

<div class="container"> 
    <div class="modal fade" id="editForm" role="dialog"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Edycja remontu</h4> 
     </div> 
     <div class="modal-body"> 

      <form class="form-horizontal"> 
      <fieldset> 

       <div class="form-group"> 
       <label class="col-md-2 control-label">Nazwa</label> 
       <div class="col-md-8"> 
       <input class="form-control" 
         id="name" 
         type="text" 
         placeholder="Nazwa" 
         required 
         minlength="3" 
         [(ngModel)] = "selectedItem.name" 
         name="name" /> 

        </div> 
       </div> 

       <div class="form-group"> 
       <label class="col-md-2 control-label">Kod</label> 
       <div class="col-md-8"> 
        <input class="form-control" 
         required 
         type="text" 
         placeholder="Kod pocztowy" 
         name="zip-code" 
         [(ngModel)] = "selectedItem.zipCode" 
         > 
       </div> 
       </div> 
      </fieldset> 
      <input type="submit" class="btn btn-default" 
        data-dismiss="modal" value="Save" 
        (click)="editRenovation()" 
        > 
      <button class="btn btn-default" data-dismiss="modal">Anuluj</button> 
      </form> 

     </div> 
     <div type="submit" class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

rénovation list.component.html:

<h1>{{title}}</h1> 

<button class="btn btn-primary" data-toggle="modal" data-target="#addForm" 
(click)="selectedItem = renovation" >Dodaj</button> 

<table class="table table-striped" [mfData]="renovations" #mf="mfDataTable" [mfRowsOnPage]="5"> 
    <thead> 
    <tr> 
     <th style="width: 20%"> 
      <mfDefaultSorter by="id">Id</mfDefaultSorter> 
     </th> 
     <th style="width: 50%"> 
      <mfDefaultSorter by="name">Nazwa</mfDefaultSorter> 
     </th> 
     <th style="width: 10%"> 
      <mfDefaultSorter by="zipCode">Kod pocztowy</mfDefaultSorter> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let renovation of mf.data"> 
     <td>{{renovation.id}}</td> 
     <td> 
      <a [routerLink]="['/renovations', renovation.id]"> 
      {{renovation.name}} 
      </a> 
     </td> 
     <td class="text-right">{{renovation.zipCode}}</td> 
     <td> 
      <button class="btn btn-info" data-toggle="modal" data-target="#editForm" (click)="selectedItem = renovation">Edytuj</button> 
      <button button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" 
      (click)="selectedItem = renovation" >Usuń</button> 
      </td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="4"> 
      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator> 
     </td> 
    </tr> 
    </tfoot> 
</table> 

<app-modal-delete [selectedItem] = selectedItem 
        [renovations] = renovations 
        (removeItem) = "onDeleteRenovation($event)"> 
</app-modal-delete> 

(partie des importations de) rénovation list.component.ts:

resetEdit(): void { 
    this._renovationService.deleteRenovation(this.selectedItem.id) 
     .subscribe(()=> this.renovations = this.renovations.filter(item => this.selectedItem !== item)) 
    } 



    editRenovation(): void { 
    var editCopy = Object.assign({}, this.selectedItem); 

    this._renovationService.editRenovation(editCopy) 
    .subscribe(() => this.renovations.push(editCopy)); 
    this.resetEdit(); 
} 

modal edit.component.ts:

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
import {IRenovationList} from '../renovation-list/renovation-list'; 
import {Renovation} from '../renovation-list/renovation'; 
import {RenovationListView} from '../renovation-list/renovation-list-view.component'; 
import {RenovationService} from '../service/renovation.service'; 



@Component({ 
    selector: 'app-modal-edit', 
    templateUrl: './modal-edit.component.html', 
    styleUrls: ['./modal-edit.component.css'] 
}) 
export class ModalEditComponent implements OnInit { 



    @Input() selectedItem: any; 
    @Input() renovations: IRenovationList[] = []; 
    @Input() newItem: Renovation = new Renovation(); 
    @Output() editItem: EventEmitter<any> = new EventEmitter<any>(); 

    constructor() { } 

    editRenovation(): void { 
    this.editItem.emit(); 
    } 



    ngOnInit() { 
    } 

} 

(seulement une partie d'importation) renovation.service.ts:

editRenovation(renovation: IRenovationList): Observable<IRenovationList> { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     const url = `${this._renovationUrl}/${renovation.id}`; 
     console.log(); 



     return this.http.put(url, renovation, options) 
       .map(() => renovation) 
       .do(data => console.log('edit remont: ' + JSON.stringify(data))) 
       .catch(this.handleError); 

    } 

Tout le monde sait où est le problème?

Answer 1

d'abord définir Temp vars:

itemName : string; 
    itemId : string; 
    itemDescription: string; 

ici est par exemple modal:

 <!--Modal: exampleModal --> 
     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog" role="document"> 

       <!--Content--> 
       <div class="modal-content"> 

        <!--Header--> 
        <div class="modal-header"> 
         <h4 class="modal-title h5 w-100" id="myModalLabel">example item {{name}}</h4> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
        </div> 

        <!--Body--> 
        <div class="modal-body mb-0 px-4"> 

         <!--Name--> 
         <div class="md-form"> 
          <input (input)="itemName = $event.target.value" [value]="itemName" type="text" id="itemName" class="form-control"> 
          <label for="itemName" class="">Item name</label> 
         </div> 

         <div class="md-form"> 
          <input (input)="itemId = $event.target.value" [value]="itemId " type="text" id="itemId" class="form-control"> 
          <label for="itemId ">item ID</label> 
         </div> 

         <div class="md-form"> 
          <input (input)="itemDescription= $event.target.value" 
[value]="itemDescription" type="text" id="itemDescription" class="form-control"> 
       <label for="itemDescription">Item description</label> 
         </div> 


        </div> 

        <!--Footer--> 
        <div class="modal-footer justify-content-center"> 
         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
         <button (click)="saveChangesModal()" type="button" class="btn btn-dark-green">Save</button> 
        </div> 

       </div> 
       <!--/.Content--> 

      </div> 
     </div> 

et voici un exemple de mise à jour de ceux-ci:

saveChangesModal() { 
     this.yourVarToUpdateOne.name = this.itemName, 
     this.yourVarToUpdateTwo.id = this.itemId, 
     this.yourVarToUpdateTwo.description : this.itemDescription 

     //some your functions 

    } 

avec cela, vous pouvez mettre à jour comment beaucoup de vars que vous voulez.

c'est ce que vous cherchez?