Angular如何实现按钮仅在用户名非空时激活，点击清空用户名值？

需求实现修改后的代码 #

你原有代码存在多处拼写不匹配的问题，已同步修正，修改后代码如下：

1. username.html

<section class="username">
  <input
    type="text"
    class="form-control"
    (input)="onUpdateUserName($event)">

  <button class="btn btn-primary"
    [disabled] = "!userName"
    (click)="onCreateUsername();">Add Username</button>

  <p class="test"> {{ usernameCreationStatus }} </p>
</section>

修改说明：

• 按钮disabled属性绑定逻辑改为!userName，实现用户名非空时按钮才可用的需求
• 修正input事件绑定的方法名大小写，和ts文件定义的方法名保持匹配

2. username.component.ts

export class UsernameCheckComponent implements OnInit {
  usernameCreationStatus = 'Nothing was created!';
  userName = '';

  constructor() {
  }

  ngOnInit(): void {
  }

  onCreateUsername () {
    this.usernameCreationStatus = 'Username was created! Username name is ' + this.userName;
    // 点击按钮后重置用户名为空
    this.userName = '';
  }

  onUpdateUserName(event:Event) {
    this.userName = (<HTMLInputElement>event.target).value;
  }
}

修改说明：

• 删除无用的allowNewUsername变量和对应的定时器逻辑，按钮可用状态直接和userName绑定
• 修正onCreateUsername内的变量名错误，把不存在的CreationStatus、serverName替换为实际定义的变量
• 新增用户名重置逻辑，满足点击按钮清空输入的需求
• 把userName初始值改为空，符合表单初始状态逻辑

内容的提问来源于stack exchange，提问作者CandyCode