form.reset() does not work as expected - issues with [(ngModel)]

[moshikamit]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

Yes

Description

HI

My first intention was to user form.reset() to reset touched and dirty flags on the form.
I found that it clears the variables on my ts file. I don't like it but I can leave with it.
In order to overcome this issue after form.reset() I repopulated my variables.
The new value appears on the form only if it is different than the older (before reset) one.

Here is my html file:

<form #f="ngForm">
  <input type="text" [(ngModel)]="numberToDisplay" name="first" >

  <button (click)="onEqualOne(f)"
            type="button"
            >Equal 1</button>

<button (click)="onEqualTwo(f)"
            type="button"
            >Equal 2</button>

<button (click)="onReset(f)"
            type="button"
            >Reset</button>

</form>

Here is my ts file :

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'project-template';
  numberToDisplay: number = 2;

  ngOnInit(): void {
    
  }

  onEqualOne(myForm: NgForm) {
    myForm.reset();
    console.log("right after form.reset() " +this.numberToDisplay);
    this.numberToDisplay = 1;
    console.log("right after form.reset() + reasign 1 to the variable " +this.numberToDisplay);
  }
  onEqualTwo(myForm: NgForm) {
    myForm.reset();
    this.numberToDisplay = 2;
  }
  onReset(myForm: NgForm) {
    myForm.reset();
  }
}

Reproduction scenario:

1. Run the app. The text field displays 2.
2. Hit the "Equal 1" button. The text field displays 1.
3. Hit the "Equal 1" button again. The text field is empty :-(. This is the bug.
4. Look at the console.log and see that numberToDisplay variable equals 1.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.12
Node: 16.17.0
Package Manager: npm 8.15.0
OS: win32 x64

Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.12
@angular-devkit/build-angular   14.2.12
@angular-devkit/core            14.2.12
@angular-devkit/schematics      14.2.12
@angular/cli                    14.2.12
@schematics/angular             14.2.12
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

No response

[garrettld]

This is working as intended, unfortunately. In your reproduction the NgModel directive is initially bound to the value 1, then when you click the button to reset the value to 1 and change detection runs, the value of the binding is still 1, so it doesn't recognize that as a change and effectively ignores it. While that's happening, the form.reset() call updates the input element's value to null, clearing it out.

You can work around this by passing the new value to the reset call, like form.reset({ first: 1 }) instead.

duplicate of #19835

[moshikamit]

Thanks for the reply.
At least I have a workaround.
I stil thinks this is a bug.
I have a variable bound to the screen this means that the screen should display what's in the variable. It's not supposed to be bound to a value.

1. myForm.reset(); - Resets the form and clears the variables. The variable is clear so the screen displays nothing. That is o.k.
2. console.log("right after form.reset() " +this.numberToDisplay); - The console displays null. That is o.k.
3. this.numberToDisplay = 1; - The variable that is bound to the screen gets the value 1. The screen displays nothing. Any way you look at it this situation is wrong. When the bound variable on the screen displays something else than the variable in the ts file this is wrong.
   I agree that this issue is similar to issue 19835 but it was a bug then and it is a bug now. Maybe the specs should be changed but this is a bug.

[moshikamit]

I would say that you guys have some major issue around here.
Here is another example which is very different.
I have car brands table
1 - Honda
2 - Toyota
I have car type table which looks something like this.
BrandId CarId CarName
1 ------- 1 ---- Jazz
1 ------- 2 ---- Accord
2 ------- 1 ---- Corola
2 ------- 2 ---- Rav4

0 ------ 0 ---- Please Choose -> this is added via code when I build the any select box options.

I have a select box component that gets which brand options to display to the user and which car specific to focus on. With these parameters the select box component selects the data from the DB and displays it to the user.
The user chooses Brand select box displays Honda and Toyota. The user chooses Honda. A car name select box gets the user's choice and displays the options Jazz and Accord. The user chooses Jazz.
Now, because of my internal reasons I tell the brands select box to change it's selection to Toyota which it does and this is displayed on the screen. Now I tell car name select box change your options from Honda to Toyota and focus on Corola. car name select box loads the options of Corola and Rav4 but displays "Please Choose". This happanes because Corola === 1 and Jazz === 1 the select box does not see a change and displays "Please choose".
If the user chooses Honda Accord and I tell the select box to dispaly Toyota Corola, Corola is displayed.
You guys are saying that the engine runs fine the only thing is that it does not do what it's supposed to do and that is make shure that the value in the TS file is the same as the value on the screen. That is what [(ngModel)] is all about.

[JeanMeche]

Per @garrettld's explanation. This works as designed, template-driven forms are more CD dependent that reactive forms.