使用帶驗證的angularjs2開發登錄頁面

我是angularjs2的新手。
我已經準備好了使用angularjs2進行驗證的登錄頁面，但是我收到了一些錯誤。在這裏我有attached我的代碼有錯誤。使用帶驗證的angularjs2開發登錄頁面

視圖代碼：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit(form.value)" class="smart-form client-form"> 
<header>Sign In</header> 
    <fieldset> 
    <section> 
     <label class="label">UserName</label> 
     <label class="input"> 
      <i class="icon-append fa fa-user"></i> 
      <input type="text" id="username" [formControl]="form.controls['username']" > 
      <control-messages [control]="loginForm.controls.username"></control-messages> 
      <b class="tooltip tooltip-top-right"> 
      <i class="fa fa-user txt-color-teal"></i> 
       Please enter username 
      </b> 
     </label> 
    </section> 

    <section> 
     <label class="label">Password</label> 
     <label class="input"> 
     <i class="icon-append fa fa-lock"></i> 
     <input type="password" id="password" formControlName="password"> 
     <control-messages [control]="loginForm.controls.password"></control-messages> 
     <b class="tooltip tooltip-top-right"> 
      <i class="fa fa-lock txt-color-teal"></i> 
      Enter your password 
     </b> 
     </label> 
     <div class="note"> 
     <a href="forgotpassword">Forgot password?</a> 
     </div> 
    </section> 
</fieldset> 
<footer> 
    <button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid"> 
    Sign in 
    </button> 
</footer>

控制器：

import { Component } from '@angular/core'; 
import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from '@angular/forms'; 
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; 
import { ValidationService } from 'app/validation.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'login-app', 
    templateUrl: 'login.html', 
    styleUrls: ['login.css'], 
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES] 
}) 
export class LoginComponent 
{ 
    form: FormGroup; 
    userForm: any; 

    constructor(private formBuilder: FormBuilder) { 

    this.loginForm = this.formBuilder.group({ 
     'username': ['', Validators.required], 
     'password': ['', [Validators.required, Validators.minLength(10)]] 
    }); 

    console.log(this.userForm); 
    } 

    saveData() { 
    if (this.loginForm.dirty && this.loginForm.valid) { 
     alert(`Username: ${this.loginForm.value.username} Password: ${this.loginForm.value.password}`); 
    } 
    } 

}

NGMODULE：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { ControlMessagesComponent } from './control-messages.component'; 
import { ValidationService } from './validation.service'; 

import { LoginComponent } from './login/login.component'; 
import { ProjectgroupsComponent } from './Projectgroups/projectgroups.component'; 
import { PageNotFoundComponent } from './PageNotFound/pagenotfound.component'; 


/* 
const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: '', component: LoginComponent }, 
    {path: '/404', name: 'NotFound', component: PageNotFoundComponent}, 
    {path: '**', redirectTo: 404} 
]; 
*/ 
export const routeConfig:Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: "**", 
     component: PageNotFoundComponent 
    }, 
    { 
     path: "", 
     component: LoginComponent 
    } 
]; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    RouterModule.forRoot(routeConfig) 
    ], 
    exports: [ 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    declarations: [ 
    ControlMessagesComponent, 
    AppComponent, 
    LoginComponent, 
    ProjectgroupsComponent, 
    PageNotFoundComponent 
    ], 
    providers: [ ValidationService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 
export class AppRoutesModule {} 
platformBrowserDynamic().bootstrapModule(AppModule)

;

我的問題是：我該如何解決這個錯誤？
是否有任何其他可能的解決方案來避免此錯誤？
所有建議都可以接受。
感謝所有提前。

來源

2016-11-29 Ruchi Patel

可否請您編輯的錯誤信息到你的問題？ –

查看http://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form –

@Pekka웃請您檢查附件圖片嗎？其中我已經描述了我的錯誤 –

變化

form: FormGroup;

到

loginForm: FormGroup; //change here

它應該工作

來源

2016-11-29 11:46:01 Ash

我已經改變它了顯示錯誤 –

哦，然後檢查此演示https://github.com/ashjha/ANGU LAR2-GRADE/blob/master/src/app/grade/grade.component.html希望它能解決你的問題@RuchiPatel ji – Ash

我已經檢查過這個解決方案，它仍然顯示錯誤.. :( –

使用帶驗證的angularjs2開發登錄頁面

回答

相關問題