在Angular中,可以使用模板引用变量和表单验证来解决当输入为空时按钮禁用不起作用的问题。下面是一个示例代码:
HTML模板文件:
Component文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
inputValue: string;
constructor() { }
}
在上面的示例中,我们使用了[(ngModel)]
指令来绑定输入框的值到组件的inputValue
属性上。通过设置required
属性,确保输入框不能为空。
在按钮的[disabled]
属性中,我们使用了!inputValue
来判断输入框是否为空。如果inputValue
为空,则按钮会被禁用。
请注意,为了使用ngModel
指令,你需要在模块中导入FormsModule
。在app.module.ts
中添加以下代码:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
// ...
})
export class AppModule { }
这样,当输入框为空时,按钮就会被禁用。