在角度2中验证,而不是从@ angular/common导入与表单验证相关的ControlGroup和Control？

Question

嗨,我是角度2和angularcli的新手,请帮助我.

我创建了需要验证的表单.我试图从@ angular/common导入指令或服务,显示错误.我试图从@ angular/common访问ControlGroup和Control.验证我正在使用FormBuilder

我没有得到我做错的事

这是我的组件打字稿文件

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]

});

}
}

这是我的HTML页面,其中包含表单

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

我已经应用验证来查看,但我收到错误错误我得到的错误如下

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

我的app.module.ts文件是

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

请让我在哪里错了.我不知道如何处理这个错误.

Answer 1

有些不对劲

1. 不要尝试使用表格@angular/common.你应该使用那些@angular/forms.的类似物ControlGroup在@angular/forms是FormGroup.而模拟Control是FormControl.

2. 如果您打算使用反应形式,那么您应该导入ReactiveFormsModule而不是FormsModule

   import { ReactiveFormsModule } from '@angular/forms'
   
   @NgModule({
     import: [ ReactiveFormsModule ]
   })
   

3. 在您的模板中,请勿使用ngControl,使用formControlName.

4. 在模板中,传递FormGroup给[formGroup]指令

   <form [formGroup]="myForm">
   

5. 在你的提交中ngSubmit(sgnform.value),它应该更像是

   (ngSubmit)="onSubmit()"
   

   您已经可以访问FormGroup组件中的内容,因此您无需将任何内容传递给回调.还要确保onSubmit控制器中有方法.

也可以看看:

• 食谱:动态表格