为什么我无法在 Angular 5 和打字稿中使文本区域部分不可编辑？答案

【问题标题】：why i am not able to make the text area partially non editable in angular 5 and typescript?为什么我无法在 Angular 5 和打字稿中使文本区域部分不可编辑？
【发布时间】：2019-12-08 23:23:26
【问题描述】：

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

例如，我可以从我的组件 ts 文件中设置初始值，例如：“RMO”到我的文本区域。

用户无法删除文本区域中设置的文本“RMO”。

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

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

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

当用户按下一个键时，就会触发一个功能。即 ensureMessagePrefixNonEditable(messageTxt.value)。如果旧值与特定搜索字符串不匹配，此函数会尝试替换旧值。以下是我的功能。

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

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

我也重写了我的功能，但问题仍然存在

  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 中用原始字符串设置消息文本区域。

谢谢

【问题讨论】：

您可以使用指令来执行此操作。您将需要一个正则表达式，如果它不匹配，则添加默认文本或类似的内容。
不要在 textarea 中做任何事情，在提交时在前面添加“RMO”。 const valueToActOn = RMO${formfieldvalue}
不幸的是客户和经理不喜欢的解决方案
@ukn 我现在正在使用正则表达式。但是它仍然不起作用。 ensureMessagePrefixNonEditable(inputTxtMsg: string){ 让 originalValue: string = inputTxtMsg; let messagePrefixSearchWithSpace: string = this.messagePrefix.concat(' ');让正则表达式： RegExp = new RegExp("^" + originalValue+ "$"); if(!regex.test(messagePrefixSearchWithSpace)){ this.messageControl.patchValue(originalValue); } }
如果keydown事件与你的正则表达式不匹配，你可以阻止它

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

使用 ngModelChange 事件处理程序的角度反应表单版本

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>

【讨论】：

我正在使用响应式表单 (ngModelChange)="doSomething($event)"。这适用吗？

【解决方案2】：

这是我将使用的指令，您可能需要对其进行调整。它检查输入中包含的文本是否与您的正则表达式匹配，否则会阻止按键。

HTML：

<textarea regexDirective="your regex"></textarea>

指令：

@Directive({
    selector: '[regexDirective]'
})
 export class RestrictToPatternDirective {
        @Input() appRestrictToPattern = ''; // should be your regex passed as an input in case it needs to be reusable

        constructor(private elementRef: ElementRef) { }

        @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent): void {
            if (new RegExp(this.appRestrictToPattern).test(this.elementRef.nativeElement.value + e.key)) {
                // let it happen, don't do anything
                return;
            }  else {
                e.preventDefault();
            }
        }
    }

【讨论】：