Angular 18中如何修改<input type="color">的默认颜色？

当你使用ngModel双向绑定时，<input type="color">的value属性会被绑定的变量值覆盖，直接写value="#ff0000"不生效的原因是绑定变量初始值为undefined/null，浏览器会默认 fallback 到#000。

解决方法如下：

1. 在组件类中初始化绑定变量
   在对应的组件.ts文件里定义绑定变量，并设置初始颜色值：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  standalone: true, // 若使用NgModule则不需要这个属性
  imports: [FormsModule], // 必须导入FormsModule才能用ngModel
  template: `
    <input type="color" name="color" [(ngModel)]="selectedColor" />
  `
})
export class YourComponent {
  // 设置你想要的默认颜色
  selectedColor = '#ff0000';
}

2. 确保FormsModule已导入

• 如果是独立组件：在组件的imports数组中加入FormsModule（如上代码所示）。
• 如果是NgModule架构：在对应的模块@NgModule的imports数组中加入FormsModule。

如果不需要双向绑定，只是要静态默认颜色，直接移除ngModel属性即可：

<input type="color" name="color" value="#ff0000" />

内容的提问来源于stack exchange，提问作者Hansana Prabath