Question

我有一个带有模板驱动表单的组件，我有一个对象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：[null]

..

当我需要再次使用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，则在单击reset并获得null值之后，它还会在控制台中提供附加到该对象的另一条消息：

“下面的值刚刚被评估”

如此看来，一旦我单击“重置”，我便获得了所需的值，但随后它立即变为null值？可能吗？

如果是，那么解决此问题的方法是什么？

我还尝试了viewchild来访问每个表单的字段并将其赋予“”或[]，但仍然得到null

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

谢谢！

Answer 1

undefined || 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 || [];
}

然后它应该工作

重置模板驱动的表单/表单的对象类型脚本Angular 6

1 个答案: