2017-04-11 5 views
0

Ich habe hier ein kleines Problem mit angular-cli und ich bin nicht in der Lage zu lösen, ich fand einige Antworten hier ähnlich, aber trotzdem konnte ich mit vorgeschlagenen Lösungen nicht lösen.Fehler: nicht abgefangen (in Versprechen): Fehler: FormGroup erwartet eine FormGroup-Instanz. Bitte pass eins in

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

} 
+1

Bitte nur auf Englisch posten .. danke –

+1

Sorry, ich habe vergessen ,,, –

Antwort

0

Sie this.loginForm() zweimal aufrufen: einmal im Konstruktor und einmal im ngOnInit().

Nehmen Sie den Aufruf im Konstruktor.

Verwandte Themen