1


I am newbie to angularjs2.
I have prepared Login Page using angularjs2 with validation.But i have getting some error. Here i have attached my code with error.

VIEW CODE :

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

CONTROLLER :

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)

;

My question is : how can i resolve this error?
Is there any other possible solutions to avoid this error?
All suggestions are acceptable.
Thanks to all in advance.

Robin-Hoodie
  • 4,519
  • 4
  • 22
  • 56
Ruchi Patel
  • 122
  • 8
  • Can you please edit the error message into your question? – Pekka Nov 29 '16 at 10:11
  • See http://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form – Bünyamin Sarıgül Nov 29 '16 at 10:13
  • @Pekka웃 will you please check attached image ? In which i have already described my error – Ruchi Patel Nov 29 '16 at 10:15
  • @BünyaminSarıgül I have already check this solution. Can you please give me another solution? – Ruchi Patel Nov 29 '16 at 10:19
  • you need to add implements OnInit interface in your login component. – Amruth L S Nov 29 '16 at 10:19
  • @AppuAmruth How to add it? Can you please suggest me? – Ruchi Patel Nov 29 '16 at 10:20
  • export class LoginComponent implements OnInit { your class should implements this interface – Amruth L S Nov 29 '16 at 10:22
  • then add this function in your class ngOnInit() { this.loginForm = this.formBuilder.group({ type : ['', Validators.required], city : ['', Validators.required], locality : ['', Validators.required], }) } change this values according to your form – Amruth L S Nov 29 '16 at 10:22
  • @AppuAmruth I have implemented your solution still getting error. Can you please send me another examples or links for this examples? – Ruchi Patel Nov 29 '16 at 10:27
  • @AppuAmruth https://coryrylan.com/blog/angular-2-form-builder-and-validation-management – Ruchi Patel Nov 29 '16 at 10:29
  • http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html i have tried this long back and i done the validation successfully – Amruth L S Nov 29 '16 at 10:35
  • As a start, in your LoginComponent change the declaration: form: FormGroup to loginForm: FormGroup. In your html change [formControl]="form.controls['username']" to formControlName="username" then see what other errors are displayed – Riv Nov 29 '16 at 10:50
  • @Riv Still its give me an error like : Unhandled Promise rejection: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. – Ruchi Patel Nov 29 '16 at 10:57
  • see this plunker: https://plnkr.co/edit/HPJ8FErFbwgMDgFBFdYn?p=preview , it should help you get going – Riv Nov 29 '16 at 12:59
  • @Riv Thanks for help but still it's not working and showing error like : Unhandled Promise rejection: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. Also source is loading continuosly. – Ruchi Patel Nov 30 '16 at 05:02

1 Answers1

0

Change 

form: FormGroup;

to 

loginForm: FormGroup; //change here

it should work

Ashutosh Jha
  • 11,603
  • 8
  • 42
  • 72