使用带验证的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开发登录页面

回答

相关问题