Angular 角度4隐藏div工作不正常

我目前正在尝试使用Bootstrap4/Angular4制作一个简单的登录表单。问题是，基于我的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>

---

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

您应该使用ngModel指令。这可以绑定到某个对象，或者只会使.invalid、.valid等生效。。对你有用。另外，您应该引用这个模型，而不是输入元素

这项工作：

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

用户名：
用户名是必需的

是的，您应该有双向绑定。而且你不应该自己处理键盘提交。只需在表单上使用ngSubmit，并添加一个submit按钮，它就会以本机方式工作。只需一件事：这将把输入值提交到URL中。既然我有一个密码字段，有没有办法避免这个问题？在表单中添加method=“post”会导致404错误。我应该添加什么？我不知道login（）方法到底是如何工作的，因为问题是关于角度形式的。我建议你提出另一个问题，并解释更广泛的背景。

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