Ionic 4反应式表单验证移动应用程序与网络不同

Question

我有一个角度应用程序中的响应式表单验证。 我已经在我的 ionic 应用程序中尽可能相似地复制了这段代码，并且在浏览器(ionic serv)中运行时它工作正常。

但是，当我运行与移动应用程序(Android 或 iOS)相同的代码时，它不会更新验证消息。 用户离开输入(触摸)或提交表单并验证失败后，如何显示消息。

它知道一旦我提交表单就无效，只是不显示消息。 这也不是样式问题，因为如果我删除所有条件逻辑，它们就会显示出来。

代码(在浏览器中工作)：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
<ion-grid>
<ion-row class="row-padding-one"></ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3" class="input-col">
<ion-item class="custom-item" lines="none">
<ion-input 
class="login-input"
formControlName="email"
placeholder="E-Mail"
required>
</ion-input>
<div *ngFor="let validation of loginValidationMessages.email">
<div class="error-message"
*ngIf="loginForm.get('email').hasError(validation.type) && ((loginForm.get('email').dirty || loginForm.get('email').touched) || formCtrl.submitted)">
{{validation.message}}</div>
</div>
</ion-item>
...
<ion-button
class="btn-login"
type="submit"
color="primary"
expand="block">Login
</ion-button>
...
</form>

.ts 文件：

export class LoginPage implements OnInit {
fb = new FormBuilder();
loginForm: FormGroup;
loginValidationMessages;
...
onSubmit() {
if (!this.loginForm.valid) {
return;
}
const email = this.loginForm.value.email;
const password = this.loginForm.value.password;
this.tempEmail = email;
this.loginForm.reset();
this.authenticate(email, password);
}
initForm() {
this.loginForm = this.fb.group({
email:  new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
password:  new FormControl('', Validators.compose([
Validators.required
]))
});
this.loginValidationMessages = {
email: [
{ type: 'required', message: 'Email is required' },
{ type: 'pattern', message: 'Enter a valid email' }
],
password: [
{ type: 'required', message: 'Password is required' }
]
};
}

我还尝试了以下和其他一些组合：

*ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)"

更新：

正在更新登录表单表单组。 当我在提交期间控制台日志时，我可以看到这一点。
但是，如果我在模板中检查/写入值，它们不会更改，而只显示原始值。 因此，模板中的值与 .ts 文件中的值不匹配：

<ion-row>
Required: {{loginForm.get('email').hasError('required')}}<br>
Pattern: {{loginForm.get('email').hasError('pattern')}}
</ion-row>

更新 2： 事实证明，模板上没有变量正在更新。 提交后，我将全局变量设置为"true"，但在页面/模板上显示时不会更改。 看起来像是更改检测问题。 使用身份验证保护重定向后，我收到以下错误：

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

我已经在网上复制了这个问题。

Answer 1

事实证明，我的路线警卫导致了这个问题。 我在控制台中收到警告：

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

所以我在我的路线防护中添加了this.ngZone.run(() =>，它解决了这个问题。 这是欺骗性的，因为我没有在网络上解雇路由守卫，因为我直接进入登录页面，但我在设备上，因为它试图先转到主页。

canLoad(
route: Route,
segments: UrlSegment[]
): boolean | Observable<boolean> | Promise<boolean> {
return new Promise((resolve, reject) => {
this.afAuth.auth.onAuthStateChanged((user: firebase.User) => this.ngZone.run(() => {
if (user) {
if (!this.authService.member) {
this.authService.getMember(user.uid).then(member => {
// Reload adminUser data
this.authService.member = member;
resolve(true);
});
} else {
resolve(true);
}
} else {
// Remove adminUser data
this.authService.member = null;
this.router.navigateByUrl('/login');
resolve(false);
}
}));
});