如何在mat-form-field内插入当前日期时间并解决样式问题

问题根因 #

你直接把时间插值语句放在<mat-form-field>内部、<input>标签外，属于无容器的纯文本节点，不符合Angular Material对mat-form-field的子元素结构规范，才会导致文本出现在输入框外侧、打乱预设布局的样式异常。

修复方案 #

1. 首先删除模板中mat-form-field内多余的插值语句，修改后的模板代码如下：

<mat-label>Filing Time:</mat-label><br>
<mat-form-field appearance="outline" class="width-1">
  <input
    matInput
    formControlName="filingTime"
    readonly
    required
  />
</mat-form-field>

2. 在组件逻辑中将格式化后的时间赋值给对应的表单控件即可正常在输入框内展示，推荐用Angular内置的DatePipe处理时间格式化，参考ts代码：

// 首先从@angular/common引入DatePipe
import { DatePipe } from '@angular/common';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  // 你的组件元数据
  providers: [DatePipe] // 注册DatePipe
})
export class YourComponent {
  form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private datePipe: DatePipe
  ) {
    // 初始化表单时赋值当前时间
    this.form = this.fb.group({
      // 其余表单控件声明
      filingTime: [this.datePipe.transform(new Date(), 'HH:mm:ss'), Validators.required]
    });

    // 如果需要动态更新为filingDate变量对应的时间，执行以下代码即可：
    // this.form.get('filingTime')?.setValue(this.datePipe.transform(this.filingDate, 'HH:mm:ss'))
  }
}

额外说明 #

如果需要在mat-form-field内添加输入框外的辅助文本，必须使用<mat-hint>、<mat-error>这类Material官方指定的子组件承载，不能直接插入无容器的纯文本，避免破坏组件结构。

内容的提问来源于stack exchange，提问作者Rence Sacramento