Question

我目前正在尝试使用Bootstrap 4 / Angular 4创建一个简单的登录表单。事实是，基于https://angular.io/docs/ts/latest/guide/forms.html上的文档提供我的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>

我不确定我是否需要对模型或任何东西进行双向绑定，我不完全理解文档。如果它有帮助，我确实有一个课程：

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

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

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>

Angular 4隐藏div不能正常工作

1 个答案: