如何在Angular中实现输入框仅允许输入11位二进制数的校验

核心修改点 #

• 修正正则校验规则：原pattern="[0-1]{1}"仅匹配单个0或1，需修改为pattern="^[01]{11}$"，规则说明：
  • ^、$ 限定输入内容整体完全匹配规则
  • [01] 限定仅允许输入0、1字符
  • {11} 固定输入长度为11位
• 新增长度限制：添加maxlength="11"属性，禁止输入超过11位的内容
• 补全必填属性：模板驱动表单使用[(ngModel)]必须指定name属性，否则会触发Angular运行时报错
• （可选）实时过滤非法字符：添加输入事件处理，自动清除用户输入的非0/1字符，避免无效输入

完整代码示例 #

模板代码 #

<input
  class="form-control"
  id="bitsValue"  
  name="bitsValue"
  [placeholder]="field.templateOptions.placeholder"
  pattern="^[01]{11}$"
  maxlength="11"
  [(ngModel)]="ABC"
  (input)="onInput($event)"
>
<!-- 可选：校验错误提示 -->
<div *ngIf="bitsValue.invalid && (bitsValue.dirty || bitsValue.touched)" class="text-danger">
  请输入11位二进制数，仅允许输入0和1
</div>

组件类代码（可选，用于实时过滤） #

ABC = '';

onInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  // 过滤所有非0/1的字符
  inputEl.value = inputEl.value.replace(/[^01]/g, '');
  this.ABC = inputEl.value;
}

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