Question

我在这里遇到一个小问题而且我无法解决，我在这里找到了一些类似的答案，但我仍然无法用提出的解决方案解决。

HTML：

<div class="columns">
  <div class="column is-half is-offset-one-quarter">
    <form [formGroup]="form">
      <div class="field">
        <p class="control has-icon">
          <input class="input" type="email" placeholder="E-mail..." formControlName="email" required>
          <span class="icon is-small"><i class="fa fa-envelope"></i></span>
        </p>
          <span class="help is-danger" *ngIf="!form.controls.email.valid">E-mail inválido!</span>
      </div>
      <div class="field">
        <p class="control has-icon">
          <input class="input" type="password" placeholder="Senha..." formControlName="password">
          <span class="icon is-small"><i class="fa fa-lock"></i></span>
        </p>
          <span class="help is-danger" *ngIf="!form.controls.password.valid">E-mail inválido!</span>

      </div>
      <button class="button is-success is-fullwidth" routerLink="/adminpage" [disabled]="!form.valid">LOGIN</button>
    </form>
  </div>
</div>

TS：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators,  } from '@angular/forms';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html'
})
export class LoginPageComponent implements OnInit {

  public form: FormGroup;

constructor(private fb: FormBuilder) {
    this.loginForm();
  }

  loginForm() {
    this.form = this.fb.group({
      email: ['', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(50),
      ])],
      password: ['', Validators.compose([
        Validators.minLength(6),
        Validators.maxLength(32),
        Validators.required
      ])]
    });
  }

  ngOnInit(): void {
    this.loginForm();
  }

}

Answer 1

您正在调用this.loginForm()两次：一次在构造函数中，一次在ngOnInit()。

在构造函数中取出调用。

错误：未捕获（在承诺中）：错误：formGroup需要一个FormGroup实例。请通过一个

1 个答案: