Question

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

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

我尝试做：

<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>

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

有什么建议吗？

Answer 1

您缺少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);
}

Answer 2

您必须了解单向绑定与两向数据绑定。一旦使用了[[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

我可以将ngForm保留为默认值，但不能设置初始值（angular2 +）

2 个答案: