时间戳

首页 > 解决方案 > 重置模板驱动表单/表单的对象打字稿Angular 6时的问题

angular - 重置模板驱动表单/表单的对象打字稿Angular 6时的问题

问题描述

我有一个带有模板驱动表单的组件，我有一个对象 myObj，它从表单的字段中获取值。该组件看起来像：

export class a {
myObj:any;
..
..
initiateObj():void {
    this.myObj = {
       x:"",
       y:"",
       z:[],
       xy: []
   };
 }


..
..

reset():void {
   this.initiateObj();
}

  ngOnInit() {
    this.initiateObj();
  }

视图看起来像：

<form #myForm="ngForm">
  <input ... [(ngModel)]="myObj.x" #myInput="ngModel" />
  <input ... [(ngModel)]="myObj.y" #myInput1="ngModel" />

  <select ... [(ngModel)]="myObj.z">
  </select>
  ..
  .. 

  <button ....     (click)="submit()">
  <button ....     (click)="reset()">
</form>

当组件启动时 myObj 的控制台中的值是：

X：” ”，

y：“”，

z:[],

等等

但是，当我填写表格时 - 即使我没有填写表格，只需单击重置按钮，控制台中 myObj 的值将是：

x：空，

y：空，

z:[空]

..

myObj当我需要再次使用时（当我需要再次使用表单时）会导致错误。

当组件第一次启动时，这些值是 Ok。但是一旦我单击重置按钮，这些值就会变为空。

我尝试在视图中使用单向绑定 -[ngModel]而不是[(ngModel)]，然后当我单击重置时它是好的，但随后myObj不会从表单中获取值 - 因为它是单向绑定。所以我必须使用两种方式绑定。但是当我点击重置时，对象的值变为空。

我之前在这里问过，我得到的答案是这样声明课程：

export class initiateObj {
 x: '';
 y: '';
 z: [];
 xy: string;
 constructor(options: any = {}) {
   this.x = options.x || null;
   this.y = options.y || null;
   this.z = options.z || null;
   this.xy = options.xy || null;
}
}

  reset(): void {
     this.myObj = new initiateObj();
    }

   ngOnInit(): void {
     this.myObj = new initiateObj();
    }

但是这个解决方案也没有奏效。单击重置后，我仍然得到同样的东西。

然后我尝试viewchild使用内置reset方法 - 但它也没有用。尽管如此，一旦提交并再次重置 - 值变为null

然后我在控制台中意识到，如果我登录到控制台myObj，然后单击重置并获取null值后，它还会在控制台中的对象上附加另一条消息：

“下面的值刚刚被评估”

所以似乎一旦我点击重置我得到了想要的值，但它会立即改变为这些null值？可能吗？

如果是的话 - 那么解决这个问题的方法是什么？

我也尝试viewchild访问每个表单的字段并给它 "" 或 [] ，但我仍然得到null

我该如何解决？（所以我可以在组件中多次提交和重置表单，而无需重新加载页面？）

谢谢！

标签： angularformstypescript

解决方案

undefined || null将返回 null。如果您没有将任何参数值传递给您的构造函数，options.x,options.y和options.z在options.xy构造函数内将是undefined. 将您的构造函数更改为：

constructor(options: any = {}) {
   this.x = options.x || '';
   this.y = options.y || '';
   this.z = options.z || '';
   this.xy = options.xy || [];
}

那么它应该工作

推荐阅读