Angular：实现不可清除默认值的输入框需求

针对你的需求，我们可以通过监听输入事件、按键事件确保默认前缀（selectedIdentifier?.standardIdentifier）不可被删除，用户只能在前缀后添加或修改内容。以下是具体实现步骤：

1. 组件逻辑修改 #

在组件中处理表单初始化、输入校验和按键控制：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  dataCorrespondenceForm!: FormGroup;
  selectedIdentifier: any; // 你的数据源对象
  showPackage = false;
  private defaultPrefix = '';

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 获取默认前缀，转义正则特殊字符（如./*+等）避免匹配异常
    const rawPrefix = this.selectedIdentifier?.standardIdentifier || '';
    this.defaultPrefix = rawPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    
    // 初始化表单：前缀+已有用户输入（如果存在）
    const initialValue = rawPrefix + (this.getSavedUserInput() || '');
    this.dataCorrespondenceForm = this.fb.group({
      identifier: [initialValue]
    });
  }

  // 处理输入事件：确保前缀始终保留
  handleIdentifierInput(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    let inputValue = inputElement.value;
    const rawPrefix = this.selectedIdentifier?.standardIdentifier || '';

    if (!inputValue.startsWith(rawPrefix)) {
      // 提取用户输入部分，重新拼接前缀
      const userInput = inputValue.replace(new RegExp(`^${this.defaultPrefix}`), '');
      inputValue = rawPrefix + userInput;
      // 静默更新表单值，避免重复触发input事件
      this.dataCorrespondenceForm.get('identifier')?.setValue(inputValue, { emitEvent: false });
    }
  }

  // 处理按键事件：禁止在前缀范围内删除或左移光标
  handleIdentifierKeydown(event: KeyboardEvent): void {
    const inputElement = event.target as HTMLInputElement;
    const prefixLength = (this.selectedIdentifier?.standardIdentifier || '').length;

    if (inputElement.selectionStart !== null && inputElement.selectionStart <= prefixLength) {
      // 禁止退格、删除、以及光标左移到前缀前
      const forbiddenKeys = ['Backspace', 'Delete', 'ArrowLeft'];
      if (forbiddenKeys.includes(event.key) || 
          (event.key === 'ArrowLeft' && inputElement.selectionStart === 0)) {
        event.preventDefault();
      }
    }
  }

  // 处理粘贴事件：禁止粘贴覆盖前缀
  handleIdentifierPaste(event: ClipboardEvent): void {
    event.preventDefault();
    const pastedText = event.clipboardData?.getData('text') || '';
    const rawPrefix = this.selectedIdentifier?.standardIdentifier || '';
    const currentUserInput = this.userInput;
    // 粘贴内容追加到用户输入后
    this.dataCorrespondenceForm.get('identifier')?.setValue(rawPrefix + currentUserInput + pastedText);
  }

  // 获取用户实际输入的内容（去掉前缀）
  get userInput(): string {
    const fullValue = this.dataCorrespondenceForm.get('identifier')?.value || '';
    const rawPrefix = this.selectedIdentifier?.standardIdentifier || '';
    return fullValue.replace(new RegExp(`^${this.defaultPrefix}`), '');
  }

  // 示例：获取已保存的用户输入（根据你的业务逻辑调整）
  private getSavedUserInput(): string {
    // 替换成你从后端或本地存储获取已有用户输入的逻辑
    return '';
  }
}

2. 模板修改 #

更新模板，绑定事件并移除冲突的[value]属性：

<mat-form-field appearance="outline" class="col-30" id="mat-identifier">
  <mat-label>
    {{'columns.dashboard.identifier' | translate}} {{selectedIdentifier?.mandatorieIdentifier ? '*' : ''}}
  </mat-label>
  <input 
    matInput 
    formControlName="identifier" 
    maxlength="255"
    (input)="handleIdentifierInput($event)"
    (keydown)="handleIdentifierKeydown($event)"
    (paste)="handleIdentifierPaste($event)"
  >
  <mat-hint *ngIf="showPackage!=true && selectedIdentifier && selectedIdentifier?.tag !== 'OTHERS'">
    {{ 
      selectedIdentifier?.standardIdentifier + 
      (userInput ? '-' + userInput : '')
    }}
  </mat-hint>
</mat-form-field>

核心逻辑说明 #

• 前缀保留：通过input事件监听，一旦输入值不以默认前缀开头，自动重新拼接前缀和用户输入部分。
• 按键控制：通过keydown事件禁止用户在前缀范围内使用退格、删除键，也禁止光标左移到前缀之前。
• 粘贴处理：拦截粘贴事件，确保粘贴内容只能追加到用户输入部分之后，不会覆盖前缀。
• 用户输入提取：通过userInput getter轻松获取用户实际输入的内容，用于提示或提交数据。

内容的提问来源于stack exchange，提问作者Jose Avila