錯誤錯誤：未捕獲的（在承諾）：錯誤：formGroup期望一個FormGroup實例。請把一個在

Question

我在這裏有一個小問題，角CLI和我沒有能夠解決，我發現了一些一些答案在這裏差不多，但我仍然無法提出的解決方案解決。

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()。

取出在構造函數中調用。