Angular中如何实现输入框初始条件禁用且后续不再禁用？

核心需求是：初始状态下，数组board中非零值对应的输入框禁用；但用户在原本可编辑的输入框中输入非零值后，所有输入框都不再被禁用。

问题分析 #

原来使用[disabled]="board[i][j] !== 0"的问题在于，双向绑定[(ngModel)]会同步修改board的值——当用户在可编辑框输入非零值后，board[i][j]变为非零，触发禁用条件导致该输入框被禁用，不符合需求。

我们需要区分初始状态和用户操作后的状态：用初始的board值判断是否禁用，同时添加一个标志位，一旦用户完成输入操作，就彻底关闭禁用逻辑。

解决方案 #

1. 组件中保存初始状态并添加标志位

在组件初始化时，深拷贝原始board数组作为初始状态，同时新增一个hasUserInput布尔值标记用户是否进行过输入：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  board: number[][] = [/* 你的初始二维数组数据 */];
  initialBoard: number[][] = [];
  hasUserInput = false;

  ngOnInit(): void {
    // 深拷贝初始board，避免后续修改影响初始值判断
    this.initialBoard = this.board.map(row => [...row]);
  }

  tileKeyDown(event: KeyboardEvent): void {
    // 用户按下按键即标记为已输入，后续解除所有禁用
    this.hasUserInput = true;
    // 保留你原本的keydown逻辑（如限制输入范围等）
  }
}

2. 修改模板中的禁用条件

将disabled条件改为仅在用户未输入过，且初始值非零时才禁用：

<mat-grid-list [cols]="cols" rowHeight="50px" gutterSize="5px" rowHeight="1:1">
    @for (row of board; let i = $index; track i) {
        @for (num of row; let j = $index; track j) {
        <mat-grid-tile>
          <input type="number" inputmode="numeric" class="tile" [(ngModel)]="board[i][j]"
            [value]="board[i][j] === 0 ? '' : board[i][j]" 
            [disabled]="!hasUserInput && initialBoard[i][j] !== 0"
            (keydown)="tileKeyDown($event)">
        </mat-grid-tile>
        }
    }
  </mat-grid-list>

逻辑说明 #

• 初始状态下，hasUserInput为false，禁用条件依赖initialBoard[i][j] !== 0，符合初始禁用要求。
• 当用户在任意输入框按下按键，hasUserInput变为true，此时!hasUserInput为false，整个禁用条件不成立，所有输入框都保持可编辑状态，不受后续board值变化影响。

可选优化：仅在输入非零值时解除禁用 #

如果需要更严格的触发逻辑——只有当用户输入非零值后才解除所有禁用，可以替换keydown事件为input事件：

<input type="number" inputmode="numeric" class="tile" [(ngModel)]="board[i][j]"
  [value]="board[i][j] === 0 ? '' : board[i][j]" 
  [disabled]="!hasUserInput && initialBoard[i][j] !== 0"
  (input)="onTileInput(i, j)">

组件中补充方法：

onTileInput(i: number, j: number): void {
  // 只有输入非零值时才标记为已输入
  if (this.board[i][j] !== 0) {
    this.hasUserInput = true;
  }
}

内容的提问来源于stack exchange，提问作者Himanshu Sajwan