Angular表单：如何基于下拉选择动态修改输入框placeholder？

Got it, let's sort out this dynamic placeholder issue for your Angular form! Since you've got a dropdown bound to the targetType form control, we just need to dynamically update the input's placeholder based on the selected value. Here are two straightforward, maintainable approaches:

Approach 1: Template-Only Ternary Check (Great for 2 Options) #

If you only ever have two showroom types, a simple ternary expression directly in the template works perfectly. Just replace the static placeholder string with a bound conditional:

<div fd-form-item *ngIf="targetType.value != null"> 
  <label fd-form-label for="input-showroom-hostname" [required]="true">URL:</label> 
  <fd-form-input-message-group> 
    <input fd-form-control type="text" id="input-showroom-hostname" 
           <!-- Dynamic placeholder logic here -->
           [placeholder]="targetType.value === 'Type1' ? 'e.g. test1.com' : 'e.g. test2.com'" 
           formControlName="hostname" 
           [state]="determineFormControlState(hostname)" 
           (keydown.enter)="addShowroom()" /> 
    <!-- ... existing form messages ... -->
  </fd-form-input-message-group> 
</div>

Note: Replace 'Type1' and 'Type2' with the actual string values from your targetTypes array.

Approach 2: Component-Level Mapping (Better for Scalability) #

If you might add more showroom types later, using a mapping object in your component keeps your template clean and easy to update.

First, add this to your component TypeScript file:

// Your existing targetTypes array
targetTypes = ['ShowroomA', 'ShowroomB'];

// Map each type to its corresponding placeholder
private placeholderMap: Record<string, string> = {
  'ShowroomA': 'e.g. test1.com',
  'ShowroomB': 'e.g. test2.com',
  // Add new entries here if you expand the dropdown options later
};

// Optional: Getter for clean template access
get selectedPlaceholder(): string {
  const selectedType = this.targetType.value;
  // Fallback to default if no match is found
  return this.placeholderMap[selectedType] || 'e.g. test1.com';
}

Then update the input in your template to use this mapped value:

<input fd-form-control type="text" id="input-showroom-hostname" 
       [placeholder]="selectedPlaceholder" 
       formControlName="hostname" 
       [state]="determineFormControlState(hostname)" 
       (keydown.enter)="addShowroom()" />

Key Notes: #

• We use [placeholder] (property binding) instead of the static placeholder attribute to make the value reactive to dropdown changes.
• The fallback value in Approach 2 ensures your input always has a placeholder even if an unexpected value is selected.

内容的提问来源于stack exchange，提问作者Wojtek R