Angular reference # vs ngModel

Question

I wonder when do I have to use [(ngModel)] on my input and when I can just use #reference For example

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

Should I do it this way here, or maybe I can do it this way instead:

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" #newUser>
    <button class="btn btn-outline-success" (click)="onAddUser(newUser.value)">
      Add user
    </button>
  </div>
</div>

I would be thankful for any answers)

Answer 1

You don't have to use [(ngModel)], ever.NgModel is a part of the Angular FormsModule. If you have the FormsModule imported, you can use the extra functionality of ngModel. Doing so creates an NgForm and FormControl that you can use in more complicated reactive and dynamic forms and will track the field's status, e.g. dirty, touched. It will also allow you to place error validators on the field, as well as expose an Observable stream of value changes.

Using template variables and ViewChild to just grab an input element and interact with it as you would with vanilla JS is just fine as well, especially if your use case is something simple. This way you could avoid including the FormsModule in your module.