我正在使用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>
在哪里可以重置此组件,但在文本字段中看不到初始值。
有什么建议吗?
答案 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