Question

我不确定如何诊断此问题。我有一个使用firebase的Angular 4.x应用程序（通过angularfire2）。

用户登录，并被重定向到他们可以注册访客的主页（这是一个自助服务终端风格的应用程序）。

我遇到的问题是，当用户登录时，注册表单（此步骤只是一个电子邮件输入）是＆＃34;无效＆＃34;并且不会更新表格。输入和表单上的类似乎停留在ng-untouched ng-pristine ng-invalid上。如果我刷新页面（或更改标签页），输入和表单可以更新为ng-touched ng-dirty ng-valid。

这是问题的GIF（希望它有帮助吗？）：

我认为它可能是Material Design，所以我从输入中删除了材质设计包装。正如你所看到的那样，没有任何影响。日志中没有错误......我不确定如何诊断或解决这个错误。

这是我的代码： 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>

registration.component.html

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();
    }
  }

}

在刷新页面之前，Angular表单无效

0 个答案: