启动模板驱动的表单/表单的对象打字稿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 将无法从表单中获取值 - 因为它是一种方式绑定。所以我必须使用两种方式绑定。但是当我点击重置时，对象的值变为空。

我也尝试过类似的方法：

<button .... (click)="myForm.reset(); reset();"

或者在组件里用ViewChild做this.myForm.reset()

但它并没有解决问题。

有没有办法在重置时解除对象与 [(ngModel)] 的绑定？

或任何其他方式来解决这个问题？ （并且仍然使用两种方式绑定 [(ngModel)] ）

这是一种在离开/再次启动组件之前应该使用几次的表单。

请指教。

谢谢

Answer 1

这样声明你的类

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();
  }