Увеличьте счетчик на нажатие клавиши 4 и уменьшите клавишу Backspace

Question

Я новичок, и я пытаюсь добиться этого.

• Когда мы вводим какой-либо текст в текстовой области, символ в метке увеличивается
• Когда мы нажимаем клавишу Backspace, счетчикдолжно уменьшиться.
• Если пользователь пытается ввести больше, чем указанный символ, счетчик должен отобразить 0, и пользователь не должен иметь возможность что-либо печатать
• Если они нажимают клавишу Backspace, он должен отображать нетсимволов в текстовой области

В моем HTML у меня есть:

<div class="col-sm-12 nopadding">
  <mat-form-field class="col-sm-12 nopadding">
    <textarea 
      matInput 
      placeholder="Role" 
      (keydown)="CounterMax(800,$event)" 
      [(ngModel)]="txtRole" 
      aria-label="Role">
    </textarea>
  </mat-form-field>
  <label class="nopadding clrlbl">
    Minimum character: {{lblRole}}
  </label>
  <br/>
</div>

В моем файле TS у меня есть эта функция

lblRole: number = 800;
CounterMax(count, event) {
  var data = event.target.value.length;
  if (data >= count) {
    this.lblRole = 0;
    return false;
  } else {
    return true;
  }
}

Каким-то образом яумудриться увеличить счетчик и запретить пользователю вход один раз.символов более 800, но я не знаю, как справиться с нажатием клавиши Backspace и уменьшить счетчик.Не могли бы вы помочь мне с этим.

Answer 1

Я действительно не получил обоснование этого требования:

Если пользователь пытается ввести больше, чем указанный символ, счетчик должен отобразить 0, и пользователь не сможет набрать что-либо

Я думаю, что лучшим UX будет показывать пользователю {{role.length}}/{{maxChars}}

Но кроме этого, все можно достичь, просто используя [maxlength] в качестве синтаксиса привязки свойств.

Попробуйте это:

<div class="col-sm-12 nopadding">
  <textarea 
    placeholder="Role"
    [(ngModel)]="role"
    [maxlength]="maxChars">
  </textarea>
  <br/>
  <br>
  <label class="nopadding clrlbl">
    Characters Remaining: {{role.length}}/{{maxChars}}
  </label>
  <br/>
</div>

А в вашем классе:

@Component({...})
export class AppComponent  {
  maxChars = 800;
  role = '';
  chars = 0;
}

Вот Образец StackBlitz для вашей ссылки.