我可以将ngForm保留为默认值,但不能设置初始值(angular2 +)

时间:2018-06-21 13:12:22

标签: angular angular-forms

我正在使用Angular2 +,并且我有一个简单的ngForm,它具有一个重置按钮,并在底部具有一个重置为默认按钮。

View Plunker

我希望能够看到在加载/初始化页面时,点击“使用默认值重置表单”按钮时出现的默认值。

我尝试做:

<input type="text" name="" id="name" class="form-control" required="required" 
title="" name="name" [(ngModel)]="defaultValues.name" required>

可以在其中设置初始值的地方,但是此组件不会重置...

VS

<input type="text" name="" id="name" class="form-control" required="required" 
title="" name="name" ngModel required>

在哪里可以重置此组件,但在文本字段中看不到初始值。

有什么建议吗?

2 个答案:

答案 0 :(得分:2)

您缺少ngModel值:

[(ngModel)]="values.name"
[(ngModel)]="values.amount"

要设置defaultValues,您可以使用以下内容覆盖属性:

values: any;
defaultValues = {
    amount: 20,
    name: 'defaultName'
} 

constructor() {
    this.values = this.cloneDefaultValues(this.defaultValues);
}

private cloneDefaultValues(param: any) {
    //  JSON parse and stringify methods because js use references on complex objects
    return JSON.parse(JSON.stringify(param));
}

resetFormWithDefaultValues(){
   this.values = this.cloneDefaultValues(this.defaultValues);
}

答案 1 :(得分:1)

您必须了解单向绑定与两向数据绑定。 一旦使用了[[ngModel)],就可以既分配值又轻松获取值。

我已经更新了您的懈怠

[(ngModel)]="model.name"
[(ngModel)]="model.amount"

一旦我现在更新了此工作方式。

这是你的懈怠 https://stackblitz.com/edit/angular-mpigb7

这里有更多可供理解的参考,

https://www.c-sharpcorner.com/article/angular-one-and-two-way-data-bindings-with-examples/

https://medium.com/@milosbejda/one-way-and-two-way-bindings-in-angular-4-explained-b5ec280767ec