登录表单无法将值推送到 function onSubmit

Question

我正在尝试在 Angular 中创建一个登录表单，但是我遇到了很多错误，用户名确实被传递到了 onSubmit() function，但是 this.loginForm.value 保持为空。 我尝试使用承诺但无济于事。

我的组件 ts 文件：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AuthenticationService} from '../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  returnUrl: string;
  loginForm: FormGroup;
  submitted = false;
  error = '';
  loading = false;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private formBuilder: FormBuilder,
              private authenticationService: AuthenticationService) {
      /* // redirect to home if already logged in
      if (this.authenticationService.currentUserValue) {
        this.router.navigate(['/avior/dashboard']);
    } */
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required, Validators.minLength(2)],
      password: ['', Validators.required, Validators.minLength(6)]
  });
   // get return url from route parameters or default to '/login'
    this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/login';
  }

  // convenience getter for easy access to form fields
get f() { return this.loginForm.controls; }

  login(userName: string, password: string) {

    this.router.navigateByUrl('/dashboard');

  }

  onSubmit(username, password) {
    this.submitted = true;
    console.log(username); // this prints out the correct username!
    console.log('OnSubmit is executed');
    console.log(this.loginForm.value); // THIS IS SOMEHOW EMPTY WTF
    // stop here if form is invalid
    if (this.loginForm.invalid) {
        return console.log('LoginForm Invalid');
    }
    this.loading = true;
    this.authenticationService.login(this.f.username.value, this.f.password.value)
        .pipe(first())
        .subscribe(
            data => {
                this.router.navigate([this.returnUrl]);
            },
            error => {
                this.error = error;
                this.loading = false;
            });
}
}

我的组件 HTML 文件：

<div class="container">
<div class="row">
  <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
    <div class="card card-signin my-5">
      <div class="card-body">
        <h5 class="card-title text-center">Login</h5>
        <br>
        <form [formGroup]="loginForm" class="form-signin" (ngSubmit)="onSubmit(this.f['username'].value, this.f['password'].value)">
          <div class="form-label-group">
            <input #userName formControlName="username" type="text" id="inputUser" class="form-control" placeholder="Username" required autofocus [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
            <label for="inputUser">Benutzername</label>
            <div *ngIf="submitted && f['username'].errors" class="invalid-feedback">
                <div *ngIf="f['username'].errors.required">Benutzername ist erforderlich</div>
            </div>
          </div>

          <div class="form-label-group">
            <input #password type="password" formControlName="password" id="inputPassword" class="form-control" placeholder="Password" required [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
            <label for="inputPassword">Passwort</label>
            <div *ngIf="submitted && f['password'].errors" class="invalid-feedback">
                <div *ngIf="f['password'].errors.required">Password is required</div>
            </div>
          </div>
          <br>
          <button class="btn btn-dark btn-block" type="submit">login</button>
        </form>
      </div>
    </div>
  </div>
</div>

我的错误：

错误1（未知来自哪里）：

ERROR Error: "[object Object]"
    Angular 8
        resolvePromise
        resolvePromise
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue
core.js:15724
    Angular 4
        defaultErrorLogger
        handleError
        next
        schedulerFn
    RxJS 5
        __tryOrUnsub
        next
        _next
        next
        next
    Angular 11
        emit
        onHandleError
        invoke
        run
        runOutsideAngular
        onHandleError
        handleError
        runGuarded
        _loop_1
        microtaskDrainDone
        drainMicroTaskQueue

在我将 formControlNames 添加到 HTML 之后出现的错误：

ERROR Error: "Expected validator to return Promise or Observable."
    Angular 8
        toObservable
        composeAsync
        _runAsyncValidator
        updateValueAndValidity
        setValue
        updateControl
        setUpViewChangePipeline
        _handleInput
    View_LoginComponent_0 LoginComponent.html:12
    Angular 13
        handleEvent
        callWithDebugContext
        debugHandleEvent
        dispatchEvent
        renderEventHandlerClosure
        decoratePreventDefault
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        invokeTask
        invokeTask
        globalZoneAwareCallback

还有其中的几个：

ERROR CONTEXT 
Angular 8
core.js:15724
    Angular 4
        defaultErrorLogger
        handleError
        next
        schedulerFn
    RxJS 5
        __tryOrUnsub
        next
        _next
        next
        next
    Angular 11
        emit
        onHandleError
        invoke
        run
        runOutsideAngular
        onHandleError
        handleError
        runGuarded
        _loop_1
        microtaskDrainDone
        drainMicroTaskQueue

Stackblitz： https://stackblitz.com/edit/angular-z6nrkg （似乎失败了）

---

更新：

object object 错误是 Firefox 特定的，Chrome 给我这个错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AviorBackendService -> HttpClient]: 
  StaticInjectorError(Platform: core)[AviorBackendService -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError(AppModule)[AviorBackendService -> HttpClient]: 
  StaticInjectorError(Platform: core)[AviorBackendService -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at injectInjectorOnly (core.js:1774)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Answer 1

您的验证器周围缺少括号，应该是：

  username: ["", [Validators.required, Validators.minLength(2)]],
  password: ["", [Validators.required, Validators.minLength(6)]]

之后似乎工作正常。 另外，我会稍微更改您的错误检查，我认为这样做更直观：

  <div *ngIf="loginForm.hasError('required', 'username')">...</div>
  <div *ngIf="loginForm.hasError('minlength', 'username')">...</div>

同样在提交时，我将传递表单的值，而不是分别传递用户名和密码。 您可以从表单值中得到一个不错的 object：

(ngSubmit)="onSubmit(loginForm.value)"

堆栈闪电战