Brak akcesora wartości do kontroli formularza

Question

Używam Angular2-rc5, a obecnie dostaję błąd na mojej stronie logowania. Próbuję utworzyć formularz, ale konsola generuje wyjątki informujące mnie, że nie może znaleźć moich formcontroll s, mimo że tworzę go na init. Jakiś pomysł, dlaczego dostaję ten błąd?

komponent logowanie

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> 

Wyjątek

EXCEPTION: Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent - inline template:13:45 caused by: No value accessor for form control with name: 'email'.....

Answer 1

dodajesz formControlName do etykiety, a nie do wejścia.

Trzeba to:

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

Spróbuj użyć tego:

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

zaktualizować innych pól wejściowych, jak również.

Answer 2

W moim przypadku używam formularzy kątowych z elementami contenteditable, takich jak div i wcześniej miałem podobne problemy.

Teraz napisałem moduł ng-contenteditable w celu rozwiązania tego problemu.

Answer 3

Dla UnitTest kątowego 2 z materiałem kątowym należy dodać moduł MatSelectModule w sekcji importu.

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

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

     ], 
     providers: [.........] 
    }) 
    .compileComponents(); 
    }));