Javascript 在刷新页面之前,角度表单无效
我不知道如何诊断这个问题。我有一个使用firebase的Angular4.x应用程序(通过angularfire2) 用户登录,并被重定向到主页,在那里他们可以注册访问者(这是一个kiosk风格的应用程序) 我遇到的问题是,当用户登录时,注册表(在此步骤中仅输入一封电子邮件)是“无效”的,并且不会更新该表单。输入和表单上的类似乎卡在Javascript 在刷新页面之前,角度表单无效,javascript,forms,angular,Javascript,Forms,Angular,我不知道如何诊断这个问题。我有一个使用firebase的Angular4.x应用程序(通过angularfire2) 用户登录,并被重定向到主页,在那里他们可以注册访问者(这是一个kiosk风格的应用程序) 我遇到的问题是,当用户登录时,注册表(在此步骤中仅输入一封电子邮件)是“无效”的,并且不会更新该表单。输入和表单上的类似乎卡在ng未触及的ng原始ng无效的上。如果我刷新页面(或更改选项卡),输入和表单可以更新为ng topped ng dirty ng valid 以下是该问题的gif(希
ng未触及的ng原始ng无效的上。如果我刷新页面(或更改选项卡),输入和表单可以更新为ng topped ng dirty ng valid
以下是该问题的gif(希望有帮助?):
我认为这可能是材质设计,所以我从输入中删除了材质设计包装。正如你所见,这没有任何影响。日志中没有错误。。。我不知道如何诊断或解决这个问题
这是我的密码:
registration.component.html
<reg-wizard [wizardTitle]="'Registration'" #regWizard>
<ng-container wizard-steps>
<!--STEP 1: LOOK UP EMAIL-->
<reg-wizard-step (onNext)="lookupEmail($event)" [isValid]="emailForm.form.valid">
<form #emailForm="ngForm">
<md-input-container class="w100">
<input mdInput placeholder="Email" email [(ngModel)]="formData.email" name="email" type="email" required>
</md-input-container>
</form>
</reg-wizard-step>
<!--(more steps...)-->
</ng-container>
</reg-wizard>
import {Component, ContentChildren, OnDestroy, OnInit, QueryList, AfterContentInit} from '@angular/core';
import {RegistrationService} from '../../services/registration.service';
import {FirebaseListObservable} from 'angularfire2/database';
import {Subject} from 'rxjs/Subject';
import {FirebaseService} from '../../services/firebase.service';
import {MdInputContainer, MdSnackBar} from '@angular/material';
import {Router} from '@angular/router';
import {RouteGlobals} from '../../route-globals';
import {HowHearService} from '../../services/how-hear.service';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'reg-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit, OnDestroy {
formData = {
'email': '',
'firstName': '',
'lastName': '',
'tel': '',
'howHear': '',
'howHearDetails': '',
'canContact': true // default value
};
isCompleted = false;
searching = true;
requiresMoreInfo$ = Observable.of(false);
step2Text;
incrementVisitCount = true;
visitorStatusSubscription;
howHearOptions$;
constructor(private registrationService: RegistrationService, private router: Router, private routeGlobals: RouteGlobals,
private firebaseService: FirebaseService, private howHearService: HowHearService,
private snackBar: MdSnackBar) {
this.howHearOptions$ = howHearService.getHowHears();
this.clearFormData();
console.log('constructor');
}
ngOnInit(): void {
}
// reloadPage() {
// window.location.reload();
// }
startOver() {
this.clearFormData();
this.router.navigate([this.routeGlobals.registrationPath]);
}
onComplete(event) {
// if status 1, then don't increment count
// navigate dont reload
console.log(this.firebaseService.userObj$.getValue().currentEvent);
this.isCompleted = true;
this.registrationService.upsertVisitor(this.formData, this.firebaseService.userObj$.getValue().currentEvent, this.incrementVisitCount);
this.snackBar.open('Thank you for registering!', '', {duration: 1500});
}
lookupEmail(event) {
this.searching = true;
this.incrementVisitCount = true; // reset if needed
this.visitorStatusSubscription = this.registrationService.getVisitorStatus(this.formData['email']).first().subscribe(res => {
console.log('new function', res);
switch (res.status) {
case 1: // registered for this event.
this.step2Text = 'You have already been registered for this event. Please review your information to verify it is accurate.';
this.formData = res.visitor;
this.searching = false;
this.requiresMoreInfo$ = this.howHearService.requiresMoreInfo(res.visitor.howHear);
this.incrementVisitCount = false;
break;
case 0: // registered for a previous event.
this.step2Text = 'Welcome back! Please review your information to verify it is accurate.';
this.formData = res.visitor;
this.searching = false;
this.requiresMoreInfo$ = this.howHearService.requiresMoreInfo(res.visitor.howHear);
break;
case -1: // new visitor
default:
// TODO: this could come from the event.
this.step2Text = 'Thank you for visiting! Please enter your information to register.';
this.clearFormData(this.formData['email']);
this.searching = false;
}
});
}
howHearSelectChange(event) {
console.log(event);
console.log(event.value);
console.log(event.value.$key);
// this.formData.howHear = event.value.$key;
if (event.value) {
this.requiresMoreInfo$ = this.howHearService.requiresMoreInfo(event.value);
}
}
clearFormData(retainEmail?: string) {
// console.log('email retain? ', retainEmail);
let tempEmail = '';
if (retainEmail) {
tempEmail = retainEmail;
}
this.formData.email = tempEmail;
this.formData.canContact = true;
this.formData.tel = '';
this.formData.firstName = '';
this.formData.lastName = '';
this.formData.howHear = '';
this.formData.howHearDetails = '';
// reset defaults
this.isCompleted = false;
this.searching = true;
this.incrementVisitCount = true;
this.requiresMoreInfo$ = Observable.of(false);
console.log('subscription', this.visitorStatusSubscription);
}
ngOnDestroy(): void {
console.log('destroying');
if (this.visitorStatusSubscription && !this.visitorStatusSubscription.closed) {
this.visitorStatusSubscription.unsubscribe();
}
}
}
很高兴看到gif,但也可能有助于查看您的代码!;)哪种代码会有帮助?我的登录码?html?或者这个页面的ts?我认为这个页面的模板+组件可以。很高兴看到gif,但也可以帮助您查看代码!;)哪种代码会有帮助?我的登录码?html?还是这个页面的ts?我想这个页面的模板+组件就可以了。