如何防止用户在输入文本框中输入的字符数超过指定的输入字符个数?

时间:2018-11-07 09:53:36

标签: angular

我使用textarea标记,我希望在用户键入该字符时,她不能键入超过300个字符的字符。我写了代码,我有用户输入的实时字符号,但是我想当涉及300个字符时,她不能再输入了。

这是我的html代码:

<textarea type="text" style="margin-bottom: 25px"
                    id="textAreaScroll"
                    formControlName="text"
                    placeholder="متن ..."
                    (keyup)="postLengthCheck()">
          </textarea>
          <span *ngIf="createPostForm.controls['text'].valid" class="text-counter">{{validTextLength}}</span>

这是我的组件中的postLengthCheck()方法:

postLengthCheck() {

      if (this.createPostForm.controls['text'].value !== null) {
        this.postLength = this.createPostForm.controls['text'].value.length;
        this.validTextLength = 2200 - this.postLength;
      }
  }

我该如何解决?

3 个答案:

答案 0 :(得分:1)

您可以在创建formControl时添加maxLength验证器,如下所示:

new FormControl('text', [Validators.maxLength(100)]);

此致

答案 1 :(得分:0)

为什么不使用[maxLength]="'300'"

<textarea type="text" style="margin-bottom: 25px"
                id="textAreaScroll"
                formControlName="text"
                placeholder="متن ..."
                (keyup)="postLengthCheck()"
                 [maxLength]="'300'"`>
      </textarea>

答案 2 :(得分:0)

您可以像这样在maxlength='300'内使用<textarea>道具

 <textarea type="text" style="margin-bottom: 25px"
                id="textAreaScroll"
                formControlName="text"
                placeholder="متن ..."
                maxLength="300">
      </textarea>

如果您正在从Component类中读取值,则只需在[maxlength]='your_prop_name'中使用属性绑定-这可能有用

感谢快乐的编码!