如何在Angular中同时使用ngModel与ngClass并实现状态同步

一、isReadOnly值变更同步到前端的实现 #

Angular 默认自带变更检测机制，常规场景下不需要额外编写代码即可自动同步：

• 只要你在 Angular 可捕获的上下文内修改 isReadOnly 的值（比如组件的按钮点击回调、HttpClient 接口响应回调、Angular 封装的定时器等），框架会自动触发视图更新，[ngClass] 绑定的 disabled 类会自动跟随值的变化新增/移除。
• 如果修改操作发生在 Angular 上下文之外（比如原生DOM事件回调、未被 Angular 接管的异步操作），或者组件开启了 ChangeDetectionStrategy.OnPush 变更检测策略，才需要手动触发变更检测：

代码示例 #

import { Component, ChangeDetectorRef, NgZone, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  // 若开启OnPush策略需要手动标记变更
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoComponent {
  isReadOnly: boolean = false;
  demoForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private cdr: ChangeDetectorRef,
    private ngZone: NgZone
  ) {
    this.demoForm = this.fb.group({
      Gender: [false]
    })
  }

  // 常规场景修改，自动同步
  normalUpdate() {
    this.isReadOnly = !this.isReadOnly;
    // 若开启OnPush，加一行this.cdr.markForCheck()即可
  }

  // 上下文外修改场景的处理
  outOfContextUpdate() {
    const btn = document.getElementById('native-btn');
    btn?.addEventListener('click', () => {
      // 方式1：用NgZone包裹修改操作
      this.ngZone.run(() => {
        this.isReadOnly = true;
      })

      // 方式2：修改后手动触发变更检测
      // this.isReadOnly = true;
      // this.cdr.detectChanges();
    })
  }
}

建议同时给input标签添加[disabled]="isReadOnly"属性，比仅靠CSS类禁用更稳妥，避免用户通过调试工具修改样式后触发操作。

二、ngClass与ngModel结合使用方案 #

使用前需要先在当前组件所属的模块中导入FormsModule，如果用响应式表单还需要导入ReactiveFormsModule。

场景1：纯模板驱动表单（仅用ngModel） #

模板代码示例：

<div [ngClass]="{'disabled': isReadOnly, 'checked': genderValue}">
  <label class="switch">
    <input 
      type="checkbox" 
      name="Gender" 
      [(ngModel)]="genderValue"
      [disabled]="isReadOnly"
    />
  </label>
</div>

对应组件ts中声明绑定变量即可：

genderValue: boolean = false;

场景2：响应式表单（现有formControlName）配合ngModel #

Angular 6中响应式表单和ngModel同时使用需要添加[ngModelOptions]="{standalone: true}"避免报错，示例如下：

<div [ngClass]="{'disabled': isReadOnly, 'gender-checked': demoForm.get('Gender').value}">
  <label class="switch">
    <input 
      type="checkbox" 
      name="Gender" 
      formControlName="Gender"
      [(ngModel)]="genderValue"
      [ngModelOptions]="{standalone: true}"
      [disabled]="isReadOnly"
    />
  </label>
</div>

配套样式参考 #

.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}
.checked {
  border-color: #1890ff;
}

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