Динамически считайте слова, когда пользователь вводит angular

Question

1. Я хочу принять во внимание количество слов, поскольку пользователь вводит текстовую область
2. Если он / она пересекает более 100 слов, ему / ей нельзя разрешать печатать.
3. Мне нужно динамически отображать количество слов при наборе текста

sample.component.ts

 wordCounter(){
    this.wordCount = this.text ? this.text.split(/\s+/)  : 0;
    this.words=this.wordCount ? this.wordCount.length:0;

  }

Это моя функция для количество слов

sample.component. html

<textarea [(ngModel)]="text" ng-change="wordCounter()" id="wmd-input" name="post-text" class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

<div>Words:<span id="wordCount">{{ words }}</span></div>

Это мой html код Пожалуйста, помогите мне в этом. Заранее спасибо

Answer 1

Вы должны использовать keydown событие и использовать ViewChild для получения текста в текстовой области

Обновлено: если вы хотите ограничить только 100 слов, вы можете добавить [attr.disabled]="words >100 ? '' : null", чтобы отключить текстовую область

HTML

 <textarea [attr.disabled]="words >100 ? '' : null" (keydown)="wordCounter()" #text id="wmd-input" name="post-text" 
class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

    <div>Words:<span id="wordCount">{{ words }}</span></div>

TS

export class AppComponent {
  wordCount: any;

  @ViewChild("text") text: ElementRef;
  words: any;
  wordCounter() {
    //alert(this.text.nativeElement.value)
    this.wordCount = this.text ? this.text.nativeElement.value.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;
  }
}

Демо https://stackblitz.com/edit/angular-word-count

Answer 2

проверьте мой ответ в: - https://codesandbox.io/s/damp-mountain-0vpe3

Вы просто должны выполнить следующие действия: -

В app.module.ts: -

1. import { FormsModule } from "@angular/forms"
2. поставить FormsModule в массиве импорта следующим образом - imports: [BrowserModule, FormsModule]

Теперь используйте ngModel привязку в app.component.html

<div>
  <div>
    <h2>Type below</h2>
    <input type="text" [(ngModel)]="myText" placeholder=" type here..." />
  </div>
  <br /><br />
  <div class="wordCount">
    <div>
      Your Text : <span><b> {{myText}} </b></span> <br />
      <br />
      Count: <span><b> {{myText.length}} </b></span>
    </div>
  </div>
</div>

Scrrenshot: -

Answer 3

Вы можете использовать Angular Реактивный Контроль формы и использовать его disable() для достижения ваших требований. Попробуйте следующий

Контроллер

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'input-autosize-textarea-example',
  templateUrl: './input-autosize-textarea-example.html',
  styleUrls: ['./input-autosize-textarea-example.css'],
})
export class InputAutosizeTextareaExample implements OnInit {
  public remainingWords = 100;

  public textareaForm = new FormGroup ({
    textinput: new FormControl()
  });

  ngOnInit() {
  }

  wordCounter() {
    this.remainingWords = this.textareaForm.value ? 100 - this.textareaForm.value.textinput.split(/\s+/).length : 100;
    if (this.remainingWords <= 0) {
      this.textareaForm.controls['textinput'].disable();
    }
  }
}

Шаблон

<form [formGroup]="textareaForm">
  <textarea 
    formControlName="textinput"
    (keyup)="wordCounter()" 
    id="wmd-input" 
    name="post-text" 
    class="wmd-input s-input bar0 js-post-body-field processed" 
    data-post-type-id="2" 
    cols="92" rows="15" 
    tabindex="101" 
    data-min-length="" 
    oncopy="return false;" 
    onpaste="return false;" 
    oncut="return false;"></textarea>
</form>
<div style="font-style: italic;">
  {{ remainingWords }} words remaining...
</div>
<br>
{{textareaForm?.value | json}}

Оператор ?. называется оператор безопасной навигации и используется для убедитесь, что объекты определены, прежде чем пытаться получить доступ к его свойствам.

Рабочий пример: Stackblitz