CODEWITHSUNDEEP
angularjsvalidationangulartypescriptangular-cli
Malhari
Malhari

Reputation: 155

Validation in angular 2, not importing ControlGroup and Control related to form validation from @angular/common?

Hi I am new to angular 2 and angularcli please help me.

I have created form which need to validate. I am trying to import directives or services from @angular/common it showing error. I am trying to access ControlGroup and Control from @angular/common. for validation I am using FormBuilder

I am not getting what I am doing wrong

Here is my component typescript file 

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
import {ControlGroup, Control} from '@angular/common'; //at this line the error is [ts] Module '"/home/Documents/newproject/mds/node_modules/@angular/common/index"' has no exported member 'Control'

@Component({
selector: 'app-formvalidate',
templateUrl: './formvalidate.component.html',
styleUrls: ['./formvalidate.component.css']
})
export class FormvalidateComponent {
  myForm:ControlGroup;
  constructor(fb: FormBuilder) {
  this.myForm = fb.group({
  firstname: ["", Validators.required],
  lastname: ["", Validators.required],
  usermail: ["", Validators.required],
  userpass: ["", Validators.required],
  userconfpass: ["", Validators.required]

});

}
}

Here is my HTML page which is contain form 

 <div class="signin">
        <p class="login_subheading">Enter your information below</p>
       <form #sgnform="ngForm" ngSubmit(sgnform.value)>
        <div >
          <label>First Name<span class="asterisk">*</span></label>
          <input type="text" class="form-control" id="firstname"  ngControl="firstname" #firstname="ngControl">
        </div>
        <div *ngIf="!firstname.valid">This field is required</div>
        <div >
          <label>Last Name<span class="asterisk">*</span></label>
          <input  type="text" class="form-control" id="lastname"  ngControl="lastname"  #lastname="ngControl">
        </div>
        <div >
          <label>Email Address<span class="asterisk">*</span></label>
          <input  type="email" id="usermail" class="form-control" ngControl="usermail" #usermail="ngControl">
        </div>
        <div >
          <label>Password<span class="asterisk">*</span></label>
          <input type="password" id="userpass" class="form-control" ngControl="userpass"  #userpass="ngControl">
        </div>
        <div >
           <label>Confirm Password<span class="asterisk">*</span></label>
          <input type="password" id="userconfpass" class="form-control" ngControl="userconfpass" #userconfpass="ngControl">
        </div>
          <div class="margintopbtm_30">
          <button type="submit" class="btn btn-primary modal_btn">Submit</button>
          <span class="required pull-right">*Required fields</span>
          </div>

         </form>
        <div class="footer_login">
        <span class="not_registered">Already registered?</span>
        <a class="btn sign-botton modal_btn pull-right">Sign in</a>      <br>
        </div>
  </div>

I have applied validation to view but i am getting error the error what i am getting is given bellow

zone.js:388Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngControl" ("/label>
          <input type="text" class="form-control" id="firstname"    ngControl="firstname" [ERROR ->]#firstname="ngControl">
        </div>
             <div *ngIf="!firstname.valid">This field is re"):                     FormvalidateComponent@5:92
 There is no directive with "exportAs" set to "ngControl" ("/label>
          <input  type="text" class="form-control" id="lastname"      ngControl="lastname"  [ERROR ->]#lastname="ngControl">
        </div>
        <div >
"):FormvalidateComponent@10:92

My app.module.ts file is 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { FormvalidateComponent } from './formvalidate/formvalidate.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    FormvalidateComponent
 ],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule
],
providers: [],
bootstrap: [AppComponent]
   })
  export class AppModule { }

please let me where i am wrong. I am not getting what to do with this error.

Upvotes: 1

Views: 4437

Answers (1)

Paul Samsotha
Paul Samsotha

Reputation: 208944

A few things wrong

  1. Don't try and use the forms from @angular/common. You should use the ones from @angular/forms. The analogue of ControlGroup in the @angular/forms is FormGroup. And the analog of Control is FormControl.

  2. If you are going to use reactive forms, then you should import ReactiveFormsModule instead of FormsModule

    import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  import: [ ReactiveFormsModule ]
})

  3. In your template, don't use ngControl, use formControlName.

  4. In your template, pass the FormGroup to the [formGroup] directive

    <form [formGroup]="myForm">

  5. In your submit ngSubmit(sgnform.value), it should be something more like

    (ngSubmit)="onSubmit()"

    You already have access to the FormGroup in the component, so you don't need to pass anything to callback. Also make sure you have the onSubmit method in your controller.

See also:

Upvotes: 6

Related Questions