Angular 16中如何在输入框内显示类似占位符的验证提示信息？

要实现验证提示显示在输入框内部、类似占位符的效果，核心思路是通过CSS绝对定位将错误提示元素嵌入输入框区域，并结合Angular表单控件的状态动态控制显示逻辑。以下是具体实现方案：

步骤1：调整表单布局与模板优化 #

无需大幅修改现有表单结构，仅需对输入框的placeholder做条件绑定，并简化错误提示的显示判断：

<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Name<span>*</span></label>
    <input 
      type="text" 
      id="name" 
      formControlName="name" 
      class="form-control" 
      placeholder="{{ signUpForm.get('name')?.invalid && (signUpForm.get('name')?.dirty || signUpForm.get('name')?.touched) ? '' : 'Enter name' }}"
      required
    >
    <mat-error class="validation-message" *ngIf="signUpForm.get('name')?.invalid && (signUpForm.get('name')?.dirty || signUpForm.get('name')?.touched)">
      {{ signUpForm.get('name')?.hasError('required') ? 'Name is required' : '' }}
    </mat-error>
  </div>

  <div class="form-group">
    <label>Organization<span>*</span></label>
    <input type="text" id="organization" formControlName="organization" class="form-control"
      placeholder="{{ signUpForm.get('organization')?.invalid && (signUpForm.get('organization')?.dirty || signUpForm.get('organization')?.touched) ? '' : 'Enter organization' }}">
    <mat-error *ngIf="signUpForm.get('organization')?.invalid && (signUpForm.get('organization')?.dirty || signUpForm.get('organization')?.touched)">
      Organization is required
    </mat-error>
  </div>

  <div class="form-group">
    <label>Role<span>*</span></label>
    <input type="text" id="role" formControlName="role" class="form-control"
      placeholder="{{ signUpForm.get('role')?.invalid && (signUpForm.get('role')?.dirty || signUpForm.get('role')?.touched) ? '' : 'Enter role' }}">
    <mat-error *ngIf="signUpForm.get('role')?.invalid && (signUpForm.get('role')?.dirty || signUpForm.get('role')?.touched)">
      Role is required
    </mat-error>
  </div>

  <div class="form-group">
    <label>Phone Number<span>*</span></label>
    <input type="tel" id="phoneNumber" formControlName="phoneNumber" class="form-control"
      placeholder="{{ signUpForm.get('phoneNumber')?.invalid && (signUpForm.get('phoneNumber')?.dirty || signUpForm.get('phoneNumber')?.touched) ? '' : 'Enter phone number' }}">
    <mat-error *ngIf="signUpForm.get('phoneNumber')?.hasError('required') && (signUpForm.get('phoneNumber')?.dirty || signUpForm.get('phoneNumber')?.touched)">
      Phone number is required
    </mat-error>
    <mat-error *ngIf="signUpForm.get('phoneNumber')?.hasError('minlength') && (signUpForm.get('phoneNumber')?.dirty || signUpForm.get('phoneNumber')?.touched)">
      Invalid mobile number
    </mat-error>
  </div>

  <div class="form-group">
    <label>Email<span>*</span></label>
    <input type="email" id="email" formControlName="email" class="form-control"
      placeholder="{{ signUpForm.get('email')?.invalid && (signUpForm.get('email')?.dirty || signUpForm.get('email')?.touched) ? '' : 'Enter email' }}" required>
    <mat-error *ngIf="signUpForm.get('email')?.hasError('required') && (signUpForm.get('email')?.dirty || signUpForm.get('email')?.touched)">
      Email is required
    </mat-error>
    <mat-error *ngIf="signUpForm.get('email')?.hasError('email') && (signUpForm.get('email')?.dirty || signUpForm.get('email')?.touched)">
      Invalid email format
    </mat-error>
  </div>

  <div class="form-group">
    <label>Password<span>*</span></label>
    <input type="password" id="password" formControlName="password" class="form-control"
      placeholder="{{ signUpForm.get('password')?.invalid && (signUpForm.get('password')?.dirty || signUpForm.get('password')?.touched) ? '' : 'Enter password' }}" required>
    <mat-error *ngIf="signUpForm.get('password')?.hasError('required') && (signUpForm.get('password')?.dirty || signUpForm.get('password')?.touched)">
      Password is required
    </mat-error>
    <mat-error *ngIf="signUpForm.get('password')?.hasError('minlength') && (signUpForm.get('password')?.dirty || signUpForm.get('password')?.touched)">
      Password must be at least 8 characters long
    </mat-error>
  </div>

  <div class="form-group">
    <label>Confirm Password<span>*</span></label>
    <input type="password" id="confirmPassword" formControlName="confirmPassword" class="form-control"
      placeholder="{{ signUpForm.get('confirmPassword')?.invalid && (signUpForm.get('confirmPassword')?.dirty || signUpForm.get('confirmPassword')?.touched) ? '' : 'Confirm password' }}" required>
    <mat-error *ngIf="signUpForm.get('confirmPassword')?.hasError('required') && (signUpForm.get('confirmPassword')?.dirty || signUpForm.get('confirmPassword')?.touched)">
      Password is required
    </mat-error>
    <mat-error *ngIf="signUpForm.get('confirmPassword')?.hasError('minlength') && (signUpForm.get('confirmPassword')?.dirty || signUpForm.get('confirmPassword')?.touched)">
      Password must be at least 8 characters long
    </mat-error>
  </div>

  <button type="submit" [disabled]="signUpForm.invalid" class="btn submit">Sign Up</button>
</form>

步骤2：添加核心CSS样式 #

通过定位和状态选择器，将错误提示嵌入输入框，并根据输入内容动态调整位置：

/* 表单组设为相对定位，作为错误提示的定位基准 */
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* 输入框预留足够内边距，避免内容与提示重叠 */
.form-control {
  padding: 0.8rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
}

/* 错误提示默认隐藏，设置内嵌样式 */
.mat-error {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #f44336; /* Material Design错误红色 */
  font-size: 0.875rem;
  background-color: #fff; /* 覆盖输入框背景，避免与输入内容混叠 */
  padding-right: 0.5rem; /* 防止提示遮挡光标 */
  display: none;
}

/* 当控件验证失败且已交互时，显示错误提示 */
.form-control.ng-invalid.ng-dirty + .mat-error,
.form-control.ng-invalid.ng-touched + .mat-error {
  display: block;
}

/* 当输入框有内容时，将提示移到输入框下方，避免遮挡输入文字 */
.form-control:not(:placeholder-shown).ng-invalid.ng-dirty + .mat-error,
.form-control:not(:placeholder-shown).ng-invalid.ng-touched + .mat-error {
  top: calc(100% + 0.3rem);
  transform: translateY(0);
  background-color: transparent;
}

效果说明 #

• 当输入框为空且触发验证（点击输入后再离开、提交表单等），错误提示会显示在输入框内部，替代原占位符，达到类似占位符的视觉效果。
• 当输入框已有内容但验证不通过（比如邮箱格式错误），提示会自动移到输入框下方，避免遮挡用户输入的内容。
• 完全复用Angular表单的内置状态（dirty/touched/invalid），无需额外逻辑判断。

内容的提问来源于stack exchange，提问作者Midhun Joseph