Нет доступа к данным для управления формой

Question

Я использую Angular2-rc5, и в настоящее время я получаю сообщение об ошибке на моей странице входа. Я пытаюсь создать форму, но консоль выдает исключения, которые говорят мне, что он не может найти мой formcontroll, даже если я создам его в init. Любая идея, почему я получаю эту ошибку?

Войти компонент

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: 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

Вы добавляете formControlName на этикетке, а не на входе.

У вас есть это:

<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="email" type="email" formControlName="email"> 
    <label class="center-align" for="email">Email</label> 
    </div> 
</div> 

Обновить другие поля ввода, а также.

Answer 2

В моем случае я использую угловые формы с элементами contenteditable, такими как div и ранее имел схожие проблемы.

Теперь я написал ng-contenteditable модуль для решения этой проблемы.

Answer 3

Для модуля UnitTest углового 2 с угловым материалом вам необходимо добавить модуль MatSelectModule в разделе импорта.

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

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

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