Question

我想检查输入是否为空。

如果不为空，请启用提交按钮。
如果为空，请禁用提交按钮。

我尝试了(oninput)和(onchange)，但它们没有运行。

<input type="password" [(ngModel)]="myPassword" (oninput)="checkPasswordEmpty()"/>

checkPasswordEmpty() {
    console.log("checkPasswordEmpty runs");
    if (this.myPassword) {
        // enable the button
    }
}

Answer 1

在这种情况下，我会利用表单验证器。我会在您的输入中添加“必需”验证，并使用表单的全局状态来禁用/启用您的按钮。

使用模板驱动的方法，您的组件中没有要添加的代码，只有其模板中的内容...

以下是以下示例：

<form #formCtrl="ngForm">
  <input ngControl="passwordCtrl" required>
  <button [disabled]="!formCtrl.form.valid">Some button</button>
</form>

Answer 2

要将功能绑定到事件，您不必使用on作为前缀。只需放置活动。

例如，如果您要处理keydown（plunker demo）：

<input type="password" [(ngModel)]="myPassword" (keydown)="checkPasswordEmpty($event)"/>

但在您的具体情况下，由于您已使用ngModel，因此最好使用(ngModelChange)：

<input type="password" [(ngModel)]="myPassword" (ngModelChange)="checkPasswordEmpty()"/>

因为当用户粘贴（通过 CTRL + V 或鼠标右键菜单 - >粘贴）密码而不是键入密码时，它会接收更改。

请参阅 plunker demo for using (ngModelChange) here 。

Answer 3

使用@Thierry Templier建议的模板驱动方法时，表单对象还具有invalid属性。

所以代替：

<button [disabled]="!formCtrl.form.valid">Some button</button>

您还可以使用：

<button [disabled]="formCtrl.form.invalid">Some button</button>

差异很小，但我认为整体语法更简洁。

在Angular 2中输入为空时禁用按钮

3 个答案: