Angular5与Angular Material2：如何移除必填字段星号并添加自定义前置星号

没问题，这需求很常见，我帮你一步步实现：

第一步：移除Material默认的必填星号 #

Angular Material会自动给带required属性的<mat-form-field>添加一个默认星号，我们可以通过CSS来隐藏它。你可以把这段样式加到组件的样式文件里（比如your-component.component.css），如果组件启用了视图封装（默认是启用的），记得用::ng-deep来穿透样式：

/* 隐藏默认的必填星号 */
::ng-deep .mat-form-field-required-marker {
  display: none;
}

如果你不想用::ng-deep，也可以把这段样式放到全局样式文件（比如src/styles.css）里，这样就不需要穿透了，全局样式会直接生效。

第二步：在占位符前添加自定义星号 #

接下来我们要在输入框的占位符前面加上自定义的星号，最直接的方法就是修改placeholder属性，把星号加在文本前面：

<mat-form-field>
  <input 
    matInput 
    placeholder="* Applicant Name" 
    name="inputApplicantName" 
    [(ngModel)]="inputApplicantName" 
    required
  >
</mat-form-field>

如果你的项目需要支持多语言，也可以通过绑定占位符的方式动态生成带星号的文本，比如结合国际化管道：

<mat-form-field>
  <input 
    matInput 
    [placeholder]="'* ' + 'APPLICANT_NAME' | translate" 
    name="inputApplicantName" 
    [(ngModel)]="inputApplicantName" 
    required
  >
</mat-form-field>

这样就完美实现了你的需求：默认星号被隐藏，自定义星号出现在占位符前方。

内容的提问来源于stack exchange，提问作者monir tuhin