Angular 4隐藏div不能正常工作

发布时间：2020-12-17 10:24:45 所属栏目：安全来源：网络整理

导读：我目前正在尝试使用Bootstrap 4 / Angular 4创建一个简单的登录表单.事实上,基于我的 HTML模板基于 https://angular.io/docs/ts/latest/guide/forms.html上提供的文档,如果输入为空,我无法获取错误消息.这是我到目前为止： labelUser Name:/labelinput id="n

我目前正在尝试使用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>

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

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

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

您应该使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!