Angular中实现修改Firebase输入值后禁用输入框的技术问询

方案1：修改后立即禁用输入框 #

如果需要用户一修改输入值就禁用，可通过监听表单值变化实现，无需等待验证通过：

// 在组件初始化阶段添加监听
ngOnInit() {
  this.tripStatusForm.valueChanges.subscribe(() => {
    // 表单内容被修改（dirty状态）时禁用
    if (this.tripStatusForm.dirty) {
      this.isDisabled = true;
    }
  });
}

模板中给输入框绑定禁用状态：

<input formControlName="yourControlKey" [disabled]="isDisabled" />

方案2：验证通过提交后禁用（适配现有逻辑） #

如果需求是提交且验证通过后禁用，调整现有代码并确保表单引用统一，同时绑定禁用属性：

修正后的TypeScript代码 #

if(this.tripStatusForm.valid && this.tripStatusForm.dirty) {
  this.appSpinner = false;
  this.isDisabled = true;
  
  this.dbService.getServiceUpdate(
    this.tripStatusForm.controls,
    new Date(), 
    this.dateChange
  ).then((resp: any) => {
    // 可添加更新成功后的处理逻辑
  }).finally(() => {
    this.activeModal.close();
  });
} else {
  this.showAlert("danger", "No Changes made!");
}

模板绑定 #

确保输入框关联禁用状态：

<input formControlName="statusControl" [disabled]="isDisabled" />

额外提示 #

• dirty状态表示控件值被修改过，比touched（仅控件被点击）更适合判断是否有内容变更
• 也可以直接调用表单控件的disable()方法实现禁用，无需依赖isDisabled变量：

  // 禁用单个控件
  this.tripStatusForm.get('yourControlKey').disable();
  // 禁用整个表单
  this.tripStatusForm.disable();
  

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