Angular2 ngModell in Form. Verhindern, das zugrunde liegende Modell zu aktualisieren

Question

Ich habe diese Eigenschaften in einer Komponente als solche definiert.

userDataDefinitions:Array<userDataDefinition>; 
currentDefinition:userDataDefinition = null; 

I dann eine Form haben, die Daten in Übereinstimmung mit dem currentDefinition zeigt, die als solche festgelegt ist:

<div *ngFor="let userDataDefinition of userDataDefinitions"> 
      <a href="#" (click)="setCurrentDefinition(userDataDefinition)"> 
       {{ userDataDefinition.key }} 
      </a> 
     </div> 

der Form Eingabefelder ngModel als solche verwendet werden:

[(ngModel)]="currentDefinition.property" 

Das bedeutet, sobald ich eines der Eingabefelder bearbeite, werden die zugrunde liegenden currentDefinition AND userDataDefinitions wie erwartet sofort aktualisiert. Meine Frage ist, was soll ich tun, wenn ich möchte, dass das zugrunde liegende Modell NUR für eine Aktion aktualisiert wird (z. B. für das Senden des Formulars)? Sollte ich die aktuelleDefinition klonen? Sollte ich ngModel nicht benutzen?

Was ist die korrekte angular2-Methode, um dieses Ergebnis zu erzielen?

Vielen Dank

Grüße

Answer 1

Ich denke, das ist das, was Sie suchen:

{{heroName}}<br> 
<input [(ngModel)]="heroName" #change> <br> <br> 
<button (click)="update(change.value)">Update Model</button> 

Mit dem „#“ Sie haben einen Verweis auf das Objekt, das ändert Wenn Sie dann auf die Schaltfläche klicken, senden Sie Ihre Informationen als Parameter.

Werfen Sie einen Blick auf diese Frage für weitere Details

Angular2 - Update model on button click

Answer 2

Sie können auf die Ansicht, die einen One-Way-tun von der Eigenschaft bindend und nur die Eigenschaft aktualisieren auf einem Event Ihrer Wahl. Hier ist ein Beispiel: http://plnkr.co/edit/lNcp7vcEGkozTzB8w4OT?p=info

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {FormsModule} from '@angular/forms' 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <div> 
      <label>{{name}}</label> 
      <input type="text" [ngModel]="name" /> 
      <button (click)="name = 'change'">Change</button> 
     </div> 
     `, 
    }) 
    export class App { 
     name:string; 
     constructor() { 
     this.name = 'Angular2' 
     } 
    } 

    @NgModule({ 
     imports: [ BrowserModule, FormsModule ], 
     declarations: [ App ], 
     bootstrap: [ App ] 
    }) 
    export class AppModule {}