Angular2 ngModel в форме. Запретить обновление базовой модели

Question

У меня есть эти свойства в компоненте, определенном как таковой.

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

Затем у меня есть форма, которая отображает данные в соответствии с currentDefinition, который установлен так:

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

Поля ввода формы используют ngModel как таковой:

[(ngModel)]="currentDefinition.property"

Это означает, что как только я отредактирую одно из полей ввода, лежащие в его основе currentDefinition И userDataDefinitions обновляются мгновенно, как и ожидалось. Мой вопрос: что мне делать, если я хочу, чтобы базовая модель обновлялась ТОЛЬКО после действия (такого как отправка формы)? Должен ли я клонировать текущее определение? Я не должен использовать ngModel?

Как правильно использовать angular2 для достижения этого результата?

большое спасибо

С уважением

Answer 1

Вы можете выполнить одностороннюю привязку свойства к представлению и обновлять свойство только в случае события по вашему выбору. Вот пример: 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 {}

Answer 2

Я думаю, это то, что вы ищете:

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

С "#" у вас есть ссылка на объект, который меняется, если вы затем нажмете кнопку, вы отправите свою информацию в качестве параметра.

Посмотрите на этот вопрос для более подробной информации

Angular2 - обновить модель по нажатию кнопки