Question

我在页面上有两个反应形式的输入控件（参见sample）。这是主要的模板部分：

<form [formGroup]="loginForm" novalidate>
  <ion-list>
    <ion-item>
      <ion-label>PIN code</ion-label>
      <ion-input type="text" formControlName="pinVisible" ></ion-input>
      </ion-item>
    <ion-item>
      <ion-label>hidden control</ion-label>
      <ion-input type="number" formControlName="pin" #pin></ion-input>
    </ion-item>
  </ion-list>
</form>

当内容只有4个字符长时，两者都应该有效。当我编辑“隐藏控件”时，它会使用以下代码填充具有新掩码值的其他控件（“PIN码”）：

this.loginForm = this.fb.group({
  pinVisible: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
  pin: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]]
});
this.pinVisibleControl = this.loginForm.get('pinVisible');
let pinControl = this.loginForm.get('pin');
pinControl.valueChanges.subscribe((value: string) => {
  console.log(value);
  this.pinVisibleControl.setValue(new Array(value.length).fill('*').join(''));
  this.pinVisibleControl.markAsTouched({ onlySelf: true });
  console.log(`PIN visible status: ${this.pinVisibleControl.status}`);
});

问题是验证状态类（特别是ng-valid）在更改控制值后不会立即应用于“PIN码”，而是仅在下一个更改周期（当我输入第五个字母时）。因此，“PIN码”上的绿色有效指示器仅在下次更改后出现（通常包含3或5个字母，而不是4个字母）。有任何建议如何在价值变化后立即应用验证类？

Answer 1

您可以尝试拨打this.loginForm.updateValueAndValidity();而不是.markAsTouched()。标记为脏/触摸仅在检查其有效性时生效。

应用验证类ng-valid在实际状态更改后延迟一步

1 个答案: