為什么我無法在Angle 5和Typescript中使文本區域部分不可編輯？

Question

我正在使用angular 5和Typescript開發一個角度項目。 在組件的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>

每當用戶按下一個鍵時，就會觸發一個功能。 也就是說，請確保MessagePrefixNonEditable（messageTxt.value）。 如果文本值與特定搜索字符串的文本區域內容不匹配，則此函數嘗試替換舊值。 以下是我的功能。

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

但是問題是我能夠從文本區域中刪除預定義的值。 知道函數sureMessagePrefixNonEditable中有什么問題。 非常感謝任何幫助，謝謝

我也重寫我的功能如下，但仍然是問題

  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}）; 沒有在用戶界面中使用原始字符串設置消息文本區域。

謝謝

Answer 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>

Answer 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();
            }
        }
    }