फॉर्म नियंत्रण के लिए कोई मूल्य एक्सेसर

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

कोणीय सामग्री के साथ यूनिटटेस्ट कोणीय 2 के लिए आपको आयात अनुभाग में MatSelectModule मॉड्यूल जोड़ना होगा।

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

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

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