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

Question

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.

Paul Samsotha · Accepted Answer · 2016-11-17 06:42:57Z

6

A few things wrong

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.

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

import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  import: [ ReactiveFormsModule ]
})

In your template, don't use ngControl, use formControlName.
In your template, pass the FormGroup to the [formGroup] directive
```
<form [formGroup]="myForm">
```
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:

Cookbook: Dynamic Forms

edited Nov 17, 2016 at 6:42

answered Nov 17, 2016 at 6:36

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malhari Over a year ago

hi it helps me a lot thank you I have done same way and its working :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related