为何设置datetime-local初始值后无法修改？Angular项目问题

你的核心问题是同时混用了formControlName、[value]绑定和直接DOM操作，导致Angular表单的双向绑定机制被破坏，最终出现初始值能显示但无法修改的情况。

问题根源 #

1. 当使用formControlName时，Angular会将输入框与对应的FormControl实例绑定，所有值的变更应该通过表单控件API处理，而非直接操作DOM或手动绑定[value]。
2. 你在[value]中绑定的DT()函数会在Angular每次变更检测时执行，反复重置输入框的value，直接覆盖用户的手动修改，导致无法编辑。
3. 直接通过document.getElementById修改DOM元素的value，完全绕过了Angular的表单状态管理，破坏了数据一致性。

修正方案 #

改用Angular表单的标准方式初始化值，移除冗余的[value]绑定和DOM操作代码：

修改后的TS代码

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

@Component({
  // 保留你的组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  meetingForm: FormGroup;
  TODAY = new Date().toISOString().slice(0, 10);

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单组
    this.meetingForm = this.fb.group({
      ab: ['']
    });

    // 构造datetime-local要求的格式（YYYY-MM-DDTHH:mm）并设置初始值
    const initialDateTime = moment(`${this.TODAY}T08:30`).format('YYYY-MM-DDTHH:mm');
    this.meetingForm.get('ab')?.setValue(initialDateTime);
  }
}

修改后的HTML代码

<form [formGroup]="meetingForm">
  <input formControlName="ab" id="ab" type="datetime-local" class="form-control" required>
</form>

说明 #

• 利用Angular的FormBuilder创建表单组，通过setValue方法给ab控件设置初始值，完全遵循表单的状态管理机制。
• 移除[value]绑定和DT()函数后，输入框的value由FormControl自动维护，用户的修改会同步到表单控件中，不会被强制覆盖。

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