web-dev-qa-db-fra.com

Aucun accesseur de valeur pour le contrôle de formulaire

J'utilise Angular2-rc5 et je reçois actuellement une erreur sur ma page de connexion. J'essaie de créer un formulaire mais la console lève des exceptions me disant qu'elle ne peut pas trouver mes formcontroll même si je les crée sur init. Une idée pourquoi je reçois cette erreur?

composant de connexion

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import { User } from '../../models/user';

@Component({
    selector: 'login',
    providers: [LoginService],
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    private loginForm: FormGroup; // our model driven form
    private submitted: boolean; // keep track on whether form is submitted
    private events: any[] = []; // use later to display form changes

    constructor(private fb: FormBuilder, private ls:LoginService){
    }
    ngOnInit(){
        this.loginForm = new FormGroup({
            email: new FormControl('',[<any>Validators.required]),
            password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(6)]),
            rememberMe: new FormControl()
        });
    }
    save(model: User, isValid: boolean) {
        console.log("Test");
        console.log(model, isValid);
    }
    // Login in user
    login(email: any, password: any){
        this.ls.login(email, password, false); 
    }
}

Page.html

<div id="login-page">
    <div class="form-wrapper">
        <form class="login-form" [formGroup]="loginForm" novalidate (ngSubmit)="save(loginForm.value, loginForm.valid)">
            <div >
                <div class="input-field col s12 center">
                    <p class="center login-form-text">Login page</p>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <input id="email" type="email"> 
                    <label class="center-align" for="email" formControlName="email">Email</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <input id="password" type="password"> 
                    <label class="center" for="password" formControlName="password">Password</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12 m12 l12 login-text">
                    <input id="remember-me" type="checkbox" formControlName="rememberMe">
                    <label for="remember-me">Remember me</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <ahref="index.html">Login</a>
                </div>
            </div>
            <div >
                <div >
                    <p><a href="page-register.html">Register Now!</a></p>
                </div>
                <div >
                    <p><a href="page-forgot-password.html">Forgot password ?</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

Exception

EXCEPTION: Uncaught (promis): Erreur: Erreur dans la classe ./LoginComponent LoginComponent - modèle en ligne: 13: 45 provoqué par: Aucun accesseur de valeur pour le contrôle de formulaire avec le nom: 'email' .....

javascriptformsangularform-control
27
AJ_

Vous ajoutez le formControlName à l'étiquette et non à l'entrée.

Tu as ceci:

<div >
  <div class="input-field col s12">
    <input id="email" type="email"> 
    <label class="center-align" for="email" formControlName="email">Email</label>
  </div>
</div>

Essayez d'utiliser ceci:

<div >
  <div class="input-field col s12">
    <input id="email" type="email" formControlName="email"> 
    <label class="center-align" for="email">Email</label>
  </div>
</div>

Mettez également à jour les autres champs de saisie.

45
ppovoski

Pour le test unitaire angular 2 avec angular matériel vous devez ajouter le module MatSelectModule dans la section des importations).

import { MatSelectModule } from '@angular/material';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CreateUserComponent ],
      imports : [ReactiveFormsModule,        
        MatSelectModule,
        MatAutocompleteModule,......

      ],
      providers: [.........]
    })
    .compileComponents();
  }));
16
Mansur Haider

Dans mon cas, j'ai utilisé Angular avec des éléments contenteditable comme div et j'ai eu des problèmes similaires auparavant.

J'ai écrit ng-contenteditable module pour résoudre ce problème.

2
ktretyak