Question

我有一个输入，我正在使用ngModelChange来解析输入，

<input [ngModel]="value" (ngModelChange)="value = parse($event)" [ngModelOptions]="{ updateOn: 'blur' }" />

其中parse函数返回一个值，或者如果输入无效，则返回undefined。

如果输入有效，则更改为无效值，分配undefined将根据需要清除输入。

如果该值已经为undefined并且输入了无效的输入，则解析函数将再次返回undefined，但是不会清除输入。

在第二种情况下，如何强制视图进行更新，或者以其他方式解决此问题。

Answer 1

输入无效值时，您可以执行以下操作：

将value设置为input元素中输入的值
通过调用ChangeDetectorRef.detectChanges
将value设置为undefined
让Angular更新更改检测视图

这可以通过为ngModelChange事件设置不同的处理程序来完成：

<input [ngModel]="value" (ngModelChange)="setValue($event)" [ngModelOptions]="{updateOn: 'blur'}" />

ChangeDetectorRef类被注入到构造函数中，事件处理程序setValue的定义如下：

constructor(private cd: ChangeDetectorRef) { }

setValue(val: string) {
  const result = this.parse(val); // Get final value
  if (!result) {                  // If final value is invalid
    this.value = val;             // Set temporary value
    this.cd.detectChanges();      // Force view update
  }
  this.value = result;            // Set final value
}

有关演示，请参见this stackblitz。

将模型设置为未定义时的角度清除输入

1 个答案: