[angular] TypeScript-의 Angular Framework 오류-“exportAs가 ngForm으로 설정된 지시문이 없습니다”

Program / 글쓴이

TypeScript의 Angular2 양식 프레임 워크를 사용하는 동안이 오류가 계속 발생합니다.

directive“exportAs”가 “ngForm”으로 설정되어 있지 않습니다

여기 내 코드가 있습니다

프로젝트 의존성 :

  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "ng2-bootstrap": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "core-js": "^2.4.0",
    "es6-module-loader": "^0.17.8",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "0.6.17",
    "jquery": "3.0.0",
  }

그리고 이것은 로그인 템플릿입니다.

<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>

… 및 로그인 구성 요소 :

import { Component } from '@angular/core';
import {Http, Headers}  from '@angular/http';
@Component({
    moduleId: module.id,
    selector: 'login-cmp',
    templateUrl: 'login.component.html'
})
export class LoginComponent {
  constructor($http: Http) {
    this.$http = $http;
  }
  authenticate(data) {
   ... 
  }
}

이 오류가 있습니다 :

zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
            <form [ERROR ->]#loginForm="ngForm"
(ngsubmit)="authenticate(loginForm.value)">

답변

import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

답변

당신은 수입에이 FormsModule루트 AppModule뿐만 아니라에 뿐만 아니라 모든 서브 모듈로 어떤 각도 형태 지시어를 사용합니다.

// SubModule A

import { CommonModule } from '@angular/common';
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})

답변

나는 이것이 오래된 게시물이라는 것을 알고 있지만 내 솔루션을 공유하고 싶습니다. 이 오류를 해결하기 위해 imports [] 배열 에 ” ReactiveFormsModule “을 추가했습니다.

오류 : “exportAs”가 “ngForm”( “으로 설정된 지시문이 없습니다.

고치다:

module.ts

‘@ angular / forms’에서 {FormsModule, ReactiveFormsModule } 가져 오기

 imports: [
    BrowserModule,
    FormsModule ,
    ReactiveFormsModule
  ],

답변

import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  ...
})

답변

(이런 경우에 다른 사람이 나처럼 장님)
form FTW ! <form>태그 를 사용하십시오

작동하지 않습니다 :

<div (ngSubmit)="search()" #f="ngForm" class="input-group">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="submit">Go!</button>
    </span>
    <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</div>

매력처럼 작동합니다. 

 <form (ngSubmit)="search()" #f="ngForm" class="input-group">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="submit">Go!</button>
            </span>
            <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</form>

답변

다음과 같이 이름이 할당 된 경우 :

#editForm="testForm"

… exportAs는 컴포넌트 데코레이터에서 정의해야합니다. 

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

답변

FormsModule을 가져 왔는지 확인하십시오. 새로운 형태의 각도 2 릴리스 버전에는 ngControl이 없습니다. 예를 들어 템플릿을 변경해야합니다

<div class="row">
    <div class="form-group col-sm-7 col-md-5">
        <label for="name">Name</label>
        <input type="text" class="form-control" required
               [(ngModel)]="user.name"
               name="name" #name="ngModel">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
            Name is required
        </div>
    </div>
</div>