Question

我正在尝试禁用minlength为7的保存按钮。仅当输入8个字符时才应启用保存。我为此使用了keydown事件。当我开始键入字符时，这很好用，但是当我使用退格键删除字符时，仅当剩下5个字符时才禁用保存。在这方面的任何帮助表示赞赏。

<input type="tel"  name="mobileInput" autocomplete="off" (keydown)="enablePhoneDown($event,'phoneNumber')" value="{{mobile}}" class="form-control" pattern="^[0-9]*$" id="phoneNo" formControlName="phoneNo" minlength="8" maxlength="8">

 enablePhoneDown($event, type) {

      if($event.target.value.length < 7){
        if(type === 'phoneNumber') {
          this.disableButtonPhone = true;
        }
      }else{
          this.disableButtonPhone = false;
      } 
      }

Answer 1

尝试在按钮元素中使用[disabled]="disableButton"。这会将按钮的enabled属性直接绑定到您的布尔变量。

Answer 2

您可以尝试使用[disabled]属性

<input type="tel"  name="mobileInput" autocomplete="off"  
 value="{{mobile}}" class="form-control" pattern="^[0-9]*$" id="phoneNo" formControlName="phoneNo" minlength="8" maxlength="8">

<button type="button" [disabled] ="form.get('phoneNo').value <8">Button<button>

当未达到最小长度时禁用按钮

2 个答案: