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：null，

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

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

1 个答案: