为什么我无法在 angular 5 和打字稿中使文本区域部分不可编辑? [英] why i am not able to make the text area partially non editable in angular 5 and typescript?

问题描述

我有一个使用 angular 5 和 typescript 开发的 angular 项目.在我的组件的 html 模板中，我有一个文本区域框.我想让此文本区域中的前几个字符不可编辑.

I am having an angular project developed using angular 5 and typescript . In my component's html template I have an text area box. I want to make the first few characters non editable in this text area.

例如，从我的组件 ts 文件中，我可以设置初始值，例如:RMO"到我的文本区域.

So for example from my components ts file i can set the initial value, for example : "RMO " to my text area .

用户无法删除文本区域中设置的文本RMO".

The user cannot remove the text "RMO " which is set in the text area.

我有一些 jquery 代码来实现这一点(http://jsfiddle.net/zq4c873L/1/) 并将其转换为打字稿代码.但是效果不佳

i have got some jquery code to achieve this (http://jsfiddle.net/zq4c873L/1/) and i convert it to typescript code. however it is not working as well

所以这是我在组件 html 模板中定义的文本区域.

so this is my text area defined in the components html template.

<textarea id="messageTxt" formControlName="message" rows="6" [placeholder]="'PLACEHOLDERS.MESSAGE' | translate" (keydown)="ensureMessagePrefixNonEditable(messageTxt.value)" (keyup)="calculateMessagingSegmentCount(messageTxt.value)" #messageTxt></textarea>

有一个函数，只要用户按下一个键就会触发.即确保MessagePrefixNonEditable(messageTxt.value).如果文本区域内容与特定搜索字符串不匹配，此函数会尝试替换旧值.以下是我的功能.

there is a function that is triggered whenever the user press a key down. ie ensureMessagePrefixNonEditable(messageTxt.value). this function tries to replace the old value if it doesn't match the text area content with a specific search string. The following is my function .

ensureMessagePrefixNonEditable(inputTxtMsg: string){
 console.log(inputTxtMsg);
    let originalValue: string = inputTxtMsg;
    if( !inputTxtMsg.startsWith(this.messagePrefix.concat(' ')) ) {
    this.messageControl.setValue(originalValue);
    }
}

但是问题是我能够从文本区域中删除预定义的值.知道函数 ensureMessagePrefixNonEditable 有什么问题.非常感谢您的帮助，谢谢

however the problem is i am able to remove the predefined value from the text area. any idea what am is wrong in the function ensureMessagePrefixNonEditable. really appreciate any help thank you

我也按如下方式重写了我的功能，但问题仍然存在

i also rewrite my funtion as follows but still the problem

  ensureMessagePrefixNonEditable(inputTxtMsg: string){

    let originalValue: string = inputTxtMsg;

    let messagePrefixSearchWithSpace: string = this.messagePrefix.concat(' ');

    let regex: RegExp = new RegExp("^" + originalValue+ "$");

    if(!regex.test(messagePrefixSearchWithSpace)){
      this.messageControl.setValue(originalValue);
      this.formGroup.patchValue( {message: originalValue });
    }

  }

我可以看到它进入了 if 块，但是 this.formGroup.patchValue( {message: originalValue });未在 UI 中使用原始字符串设置消息文本区域.

i can see it enters inside the if block, however this.formGroup.patchValue( {message: originalValue }); didnt set the message text area with the original string in the UI.

谢谢

推荐答案

Angular Reactive Forms version using ngModelChange event handler

angular reactive forms version using ngModelChange event handler

private currentValue = "";

constructor(
    private formBuilder: FormBuilder,
) {
    this.loginForm = this.formBuilder.group({
        messageTxt: ["", Validators.required]
    });
}

public async ngOnInit() {
    this.loginForm.controls["messageTxt"].setValue("RMO");
    this.currentValue = "RMO";
}

public keepRMO($event) {
    let prefix = "RMO";
    if ($event.substring(0, 3) !== prefix) {
        alert("You are not allowed to remove the first three characters('RMO')");
        this.loginForm.controls["messageTxt"].setValue(this.currentValue);
    } else {
        this.currentValue = $event;

    }
}

html:

<textarea
class="form-control"
name="messageTxt"
id="messageTxt"
formControlName="messageTxt"
rows="6"
(ngModelChange)="keepRMO($event)"
></textarea>

这篇关于为什么我无法在 angular 5 和打字稿中使文本区域部分不可编辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！