时间戳

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

我也尝试过类似的东西：

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

或在与ViewChildto do的组件中this.myForm.reset()

但这并没有解决问题。

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

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

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

请指教。

谢谢

标签： angulartypescript

解决方案

像这样声明你的班级

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

推荐阅读