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

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，然后单击重置并获取null 值后，它还会在控制台中附加一条消息附加到该对象：

"下面的值刚刚被评估"

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

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

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

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

谢谢！

Answer 1

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

那么它应该可以工作