在Angular中如何实现用户输入准确7位数值时将按钮变为绿色？

Angular完全可以实现这个效果，用自带的类绑定语法就能搞定，具体实现方式如下：

1. 先添加绿色按钮的样式 #

在组件对应的css文件中新增自定义样式类：

/* 可根据实际需求调整样式参数 */
.valid-btn {
  background-color: #27ae60;
  color: #fff;
  border: 1px solid #27ae60;
  cursor: pointer;
}

2. 修改HTML模板代码 #

调整输入框限制、错误提示逻辑，给按钮绑定动态样式：

<!-- 加maxlength限制最多输入7位，pattern限制仅能输入数字 -->
<input 
  type="text" 
  class="inputSignInAccess" 
  [(ngModel)]="otp" 
  maxlength="7"
  pattern="\d*"
>
<div class="error" style="color: red;">
  <!-- 合并判断逻辑，仅当输入内容不为空且长度不等于7时提示 -->
  <div *ngIf="otp && otp.length !== 7">
    请输入7位数字
  </div>
</div>

<div class="inputButtons">
  <!-- 输入内容恰好为7位时自动添加绿色样式类 -->
  <button [class.valid-btn]="otp?.length === 7">ok</button>
</div>

如果需要严格校验必须是7位纯数字才触发按钮变绿，可以把按钮的判断条件替换成正则校验：

<button [class.valid-btn]="otp && /^\d{7}$/.test(otp)">ok</button>

注：如果你已经在模块中导入了FormsModule来支持ngModel双向绑定，上面的代码可以直接运行，无需额外配置。

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