形式为Angular2 ngModel。防止更新基础模型

时间:2016-11-04 06:33:26

标签: angularjs angular angular2-ngmodel

我在这样定义的组件中有这些属性。

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,如预期的那样。 我的问题是,如果我希望仅在动作(例如表单提交)时更新基础模型,我该怎么办? 我应该克隆currentDefinition吗?我不应该使用ngModel吗?

达到此结果的正确angular2方法是什么?

非常感谢

此致

2 个答案:

答案 0 :(得分: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 {}

答案 1 :(得分:-1)

我认为这是你正在寻找的东西:

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

使用&#34;#&#34;你有一个对正在改变的objekt的引用,如果你然后点击你发送信息作为参数的按钮。

查看此问题以获取更多详细信息

Angular2 - Update model on button click