title: Issue when Reset template driven form / form's object typescript Angular 6
body: <p>I have a component with a template driven form, which I have an object myObj that gets the values from the form's fields. The component looks something like:</p>
  
  <pre><code>export class a {
  myObj:any;
  ..
  ..
  initiateObj():void {
      this.myObj = {
         x:"",
         y:"",
         z:[],
         xy: []
     };
   }
  
  
  ..
  ..
  
  reset():void {
     this.initiateObj();
  }
  
    ngOnInit() {
      this.initiateObj();
    }
  </code></pre>
  
  <p>The view looks something like: </p>
  
  <pre><code>&lt;form #myForm="ngForm"&gt;
    &lt;input ... [(ngModel)]="myObj.x" #myInput="ngModel" /&gt;
    &lt;input ... [(ngModel)]="myObj.y" #myInput1="ngModel" /&gt;
  
    &lt;select ... [(ngModel)]="myObj.z"&gt;
    &lt;/select&gt;
    ..
    .. 
  
    &lt;button ....     (click)="submit()"&gt;
    &lt;button ....     (click)="reset()"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>when the component initiates the values in the console of myObj are:</p>
  
  <p>x:" ",</p>
  
  <p>y:" ",</p>
  
  <p>z:[],</p>
  
  <p>etc.</p>
  
  <p>However, when I fill the form - even if I not fill the form, just click the reset button, the values of myObj in the console will be:</p>
  
  <p>x: null,</p>
  
  <p>y: null,</p>
  
  <p>z:[null]</p>
  
  <p>..</p>
  
  <p>which causes an error when I need to use <code>myObj</code> again (when I need to use the form again).</p>
  
  <p>When the component initiates for the first time, the values are Ok. But once I click the reset button, the values become null. </p>
  
  <p>I tried to use in the view one way binding - <code>[ngModel]</code> instead of <code>[(ngModel)]</code>, and then when I click reset it's Ok, but then <code>myObj</code> will not get the values from the form - because it's one way binding. So I have to use two way bindings. But then when I click on reset the values of the object become null.</p>
  
  <p>I asked here before and the answer I got was to Declare the class like this way:</p>
  
  <pre><code>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();
      }
  </code></pre>
  
  <p>But this solution also didn't work. I still get the same thing after I click reset. </p>
  
  <p>Then I tried with <code>viewchild</code> to use the built in <code>reset</code> method - but it also didn't work. Still, once submit and reset again - the values become <code>null</code></p>
  
  <p>Then I realized in the console, that if I log to the console <code>myObj</code>, then after click reset and get the <code>null</code> values, it also gives another message attached to the object in the console: </p>
  
  <p>"value below was evaluated just now" </p>
  
  <p>So it seems that once I click reset I get the desire values, but then it changes immediately to the <code>null</code> values? Is it possible? </p>
  
  <p>And if yes - then what is the way to resolve this? </p>
  
  <p>I also tried with <code>viewchild</code> to access each form's field and give it "" or [] , but still I get <code>null</code> </p>
  
  <p>How can I resolve it? (so I can submit and reset the form multiple times while stay in the component , and not need to reload again the page?)</p>
  
  <p>Thanks!</p>