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

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>