如何在对象返回true时设置[(ngModel)]、恢复输入框旧值并动态赋值？

嘿，这三个关于Angular [(ngModel)]的问题都是日常开发里经常碰到的，我来逐个给你拆解解决方案：

1. 仅当指定对象返回true时设置[(ngModel)] #

[(ngModel)]是双向绑定的语法糖，没办法直接加条件判断来决定是否启用绑定。不过我们可以把它拆成单向绑定[ngModel]和事件绑定(ngModelChange)，根据条件控制是否同步模型值：

<!-- 假设condition是你的判断条件，返回boolean类型 -->
<input type="text" 
       [ngModel]="condition ? textValue : ''" 
       (ngModelChange)="condition ? textValue = $event : void 0">

如果你的需求是条件不满足时完全禁用绑定（输入框变成原生不受控状态），也可以用*ngIf渲染不同的输入框：

<!-- 条件满足时用带绑定的输入框 -->
<input *ngIf="condition" type="text" [(ngModel)]="textValue">
<!-- 条件不满足时用原生输入框 -->
<input *ngIf="!condition" type="text">

2. 能否将输入框的[(ngModel)]恢复至之前的取值 #

当然可以！核心思路是提前保存原始值，需要恢复时把模型值重置为保存的原始值即可：

方案1：保存初始值，按需手动恢复 #

组件代码：

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

@Component({
  selector: 'app-input-demo',
  templateUrl: './input-demo.component.html'
})
export class InputDemoComponent implements OnInit {
  textValue = '初始默认值';
  private originalTextValue!: string;

  ngOnInit() {
    // 组件初始化时保存初始值
    this.originalTextValue = this.textValue;
  }

  restoreOriginalValue() {
    // 点击按钮恢复到初始值
    this.textValue = this.originalTextValue;
  }
}

模板代码：

<input type="text" [(ngModel)]="textValue">
<button (click)="restoreOriginalValue()">恢复初始值</button>

方案2：输入验证不通过时自动恢复 #

如果需要在用户输入不符合规则时立刻恢复到上一个有效值，可以在ngModelChange事件里处理：

// 组件里新增方法
handleInputChange(newValue: string) {
  // 假设isValid是你的自定义验证逻辑
  if (this.isValid(newValue)) {
    this.textValue = newValue;
    // 更新保存的有效值
    this.originalTextValue = newValue;
  } else {
    // 验证不通过，恢复到上一个有效值
    this.textValue = this.originalTextValue;
  }
}

private isValid(value: string): boolean {
  // 示例：只允许输入数字
  return /^\d*$/.test(value);
}

模板里改成：

<input type="text" 
       [ngModel]="textValue" 
       (ngModelChange)="handleInputChange($event)">

3. 如何为[(ngModel)]进行动态赋值 #

[(ngModel)]绑定的是组件里的变量，所以直接在组件中修改这个变量的值就能实现动态赋值，输入框会自动同步更新：

场景1：从接口获取数据后赋值 #

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-input-demo',
  templateUrl: './input-demo.component.html'
})
export class InputDemoComponent {
  textValue = '';

  constructor(private dataService: DataService) {}

  fetchData() {
    // 调用接口获取数据
    this.dataService.getInputValue().subscribe((res) => {
      // 动态赋值给ngModel绑定的变量
      this.textValue = res.data;
    });
  }
}

场景2：根据其他变量变化动态赋值 #

比如监听父组件传入的@Input值变化：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-input-demo',
  templateUrl: './input-demo.component.html'
})
export class InputDemoComponent implements OnChanges {
  textValue = '';
  @Input() dynamicValue!: string;

  ngOnChanges(changes: SimpleChanges) {
    // 当dynamicValue变化时，同步更新textValue
    if (changes.dynamicValue) {
      this.textValue = changes.dynamicValue.currentValue;
    }
  }
}

模板里还是正常使用双向绑定：

<input type="text" [(ngModel)]="textValue">

内容的提问来源于stack exchange，提问作者Nithin P.H