Question

我正在使用Angular 2并正在进行API调用以获取一些JSON。通话有效，我收到回复。但在导航到登录页面（刷新令牌时）和点击提交按钮后获取：

无法读取未定义的属性“值”

重新加载页面后运行良好！。

Login.component.ts

 import { Component, OnInit } from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    import {AuthService} from '../../services/auth.service';
    import {HttpErrorResponse} from '@angular/common/http';
    import {Router} from '@angular/router';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {

      f: FormGroup;
      errorCredentials = false;

      constructor(private formBuilder: FormBuilder, private authService: AuthService,
                  private router: Router) { }

      ngOnInit() {
        this.f = this.formBuilder.group({
          email: [null, [Validators.required, Validators.email]],
          password:[null, [Validators.required]]
        });
      }

      onSubmit(){

        this.authService.login(this.f.value).subscribe(
            (res) => {this.router.navigate(['admin']);},
            (errorResponse: HttpErrorResponse) => {
             // console.log(errorResponse);
            if (errorResponse.status == 401) {
              this.errorCredentials = true;
            }
            }
        );
      }

Login.component.html

<div class="container app-login">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <div class="panel panel-default">
        <div class="panel-body">
          <h1 class="text-center">
            <b>Angular</b> Laravel
            <br/>
            <small>Amr Ahmed</small>
          </h1>
          <br/>
          <div class="alert alert-danger alert-dismissible" role="alert" *ngIf="errorCredentials">
            Email or password Invalid
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form [formGroup]="f" novalidate>
            <div class="form-group has-feedback" [ngClass]="{'has-success': f.controls['email'].valid,
                'has-error': f.controls['email'].invalid && (f.controls['email'].touched || f.controls['email'].dirty)}">
              <input type="email" formControlName="email" class="form-control" id="InputEmail" placeholder="Email">
              <span *ngIf="f.controls['email'].valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
              <span *ngIf="f.controls['email'].invalid && (f.controls['email'].touched || f.controls['email'].dirty)">
                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                <span class="text-danger">E-mail Invalid.</span>
              </span>
            </div>
            <div class="form-group" [ngClass]="{'has-success': f.controls['password'].valid,
                 'has-error': f.controls['password'].invalid && (f.controls['password'].touched || f.controls['password'].dirty)}">
              <input type="password" formControlName="password" class="form-control" id="InputPassword" placeholder="Password">
              <span class="text-danger" *ngIf="f.controls['password'].invalid && (f.controls['password'].touched || f.controls['password'].dirty)">Password Invalid</span>
            </div>
            <button type="submit" class="btn btn-default" [disabled]="f.invalid" (click)="onSubmit()">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

功能转到登录页面

goToLogin(): void{

        const router = this.injector.get(Router);
        localStorage.clear();
        router.navigate(['auth/login']);
    }

Answer 1

尝试一下，它对我有用

export class LoginComponent implements OnInit {

  f: FormGroup;
  email: FormControl;
  password: FormControl;
  errorCredentials = false;

  ngOnInit() {
    this.email = new FormControl('', Validators.required);
    this.password = new FormControl('', Validators.required);

    this.f = new FormGroup({
        email: this.email,
        password: this.password
    });
  }

Angular2 - 导航到登录页面后无法读取未定义的属性“值”

1 个答案: