Angular 4 hidden div is not working properly

Question

I'm currently trying to create a simple login form using Bootstrap 4 / Angular 4. The thing is based on my HTML template in the documentation available at https://angular.io/docs/ts/latest/guide/forms.html I cannot get error messages to work if the input is empty. This is what I still have:

<label>User Name:</label>
<input id="name"
    #name
    placeholder="user name" 
    class="form-control mb-md-3"
    (keyup.enter)="login(name.value, password.value)"
    name="username"
    required>
<div [hidden]="!name.valid || !name.pristine"
    class="alert alert-danger">User name is required</div>

I'm not sure if I need to have two-way binding to the model or something else, I don't fully understand the documentation. If this helps, I have a class for it:

export class User {
  constructor(
    public id: number,
    public name: string,
    public password: string
  ) {}
}

In addition, at the moment this is not happening for any service, nor for everything, it's just a small demo screen that will support routing.

Answer 1

ngModel. - .invalid,.valid .. , ngModel, .

:

<label>User Name:</label>
<input id="name"
   #name="ngModel"
   placeholder="user name"
   class="form-control mb-md-3"
   (keyup.enter)="login(name.value, password.value)"
   name="username" required
   ngModel>
<div *ngIf="name.invalid && name.dirty" class="alert alert-danger">User name is required</div>