Validation in angular 2、不从@angular/common导入表单验证相关的ControlGroup和Control？

Question

嗨，我是 angular 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

一些错误

不要尝试使用 @angular/common 中的表格。您应该使用 @angular/forms 中的那些。 @angular/forms 中 ControlGroup 的类似物是 FormGroup。而 Control 的类比是 FormControl.

如果你打算使用响应式表单，那么你应该导入 ReactiveFormsModule 而不是 FormsModule

import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  import: [ ReactiveFormsModule ]
})

在你的模板中，不要使用ngControl，使用formControlName。
在您的模板中，将 FormGroup 传递给 [formGroup] 指令
```
<form [formGroup]="myForm">
```
在你的提交中ngSubmit(sgnform.value)，它应该更像
```
(ngSubmit)="onSubmit()"
```
您已经可以访问组件中的 FormGroup，因此您无需向回调传递任何内容。还要确保你的控制器中有 onSubmit 方法。

另请参阅：

Cookbook: Dynamic Forms

Validation in angular 2、不从@angular/common导入表单验证相关的ControlGroup和Control？

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

validation

angularjs

typescript

angular-cli

angular