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

有些不对劲

请勿尝试使用@angular/common中的表单。你应该使用@angular/forms中的那些。 ControlGroup中@angular/forms的类似物为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

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

1 个答案: