Angular 4 隐藏的 div 无法正常工作

Question

我目前正在尝试使用 Bootstrap 4/Angular 4 制作一个简单的登录表单。事实是，我的 HTML 模板基于 https://angular.io/docs/ts/latest/guide/forms.html 上提供的文档。 ，如果输入为空，我无法使错误消息起作用。这是我目前所拥有的:

<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>

我不确定我是否需要双向绑定(bind)到模型或其他任何东西，我没有完全理解文档。如果有帮助，我确实有一个类(class):

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

此外，目前这不是服务或任何东西，它只是一个支持路由的小演示屏幕。

Answer 1

您应该使用 ngModel 指令。这可以绑定(bind)到某个对象，或者只会使 .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>