0

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

<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 个）。任何建议如何在值更改后立即应用验证类？

4

1 回答 1

0

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

于 2017-08-25T17:39:38.723 回答