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

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>

두 가지주의해야 할 사항

1. 하위 모듈을 사용하는 경우 해당 하위 모듈에서 FormModule을 가져와야합니다.

           **imports:[CommonModule,HttpModule,FormsModule]**

2. 모듈에서 FormModule을 내 보내야합니다

       **exports:[FormsModule],**

   함께 가져 오기 : [CommonModule, HttpModule, FormsModule], 내보내기 : [FormsModule],

3. Top u에서 FormsModule을 가져와야합니다.

   '@ angular / forms'에서 {FormsModule} 가져 오기;

app.module.ts 만 사용하는 경우

수출 불필요. 수입 만 필요

나는이 문제에 직면했지만 여기에 대한 답변 중 어느 것도 나를 위해 일하지 않았다. 나는 구글을 발견했다.FormsModule not shared with Feature Modules

따라서 양식이 기능 모듈에 있으면 해당 모듈을 가져 와서 추가해야합니다 FromsModule.

참조하십시오 : https://github.com/angular/angular/issues/11365

로그인 구성 요소 ts 파일에서 양식 모듈을 가져 오는 것 외에도 NgForm도 가져와야합니다.

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

이것은 내 문제를 해결했다

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

imports:[
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule/*This one in particular*/,...
],

app.module.ts에서와 같은 오류를 영구적으로 해결하십시오 "cannot bind [formGroup] or no directive with export as".

이

<div #myForm="ngForm"></div>

또한 오류가 발생하며 ngForm 지시문 을 포함하여 수정할 수 있습니다 .

<div ngForm #myForm="ngForm"></div>

나는 같은 이유로 또 같은 질문을 반복했습니다. 그래서 내가 뭘 잘못했는지 말함으로써 이것에 대답하겠습니다. 누군가에게 도움이 될 수 있습니다.

angular-cli명령을 통해 구성 요소를 만들고있었습니다.

ng gc 구성 요소 / 무언가 / 무언가

내가 한 일은 내가 원하는대로 구성 요소를 만들었습니다.

또한 컴포넌트를 생성하는 동안 앱 모듈의 선언 배열에 컴포넌트를 추가했습니다 .

이런 경우에는 제거하십시오. 그리고 짜잔! 작동 할 수 있습니다.

FormsModule을 가져온 다음 가져 오기 섹션에 배치해야합니다.

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

모듈을 가져 오지 않은 경우 간단합니다. '@ angular / forms'에서 import {FormsModule}을 가져오고 선언하십시오.

그리고 입력 필드에서 formControlName = 'whatever'만 제거하면됩니다.

ctrl + c로 앱을 종료하고 ng serve로 앱을 다시 실행해야합니다. FormsModule을 포함하지 않은 경우 app.module 파일이 배열을 가져온 다음 나중에 추가하면 각도를 알지 못합니다. 모듈을 다시 스캔하지 않습니다. , 템플릿 드라이브 접근 방식의 모든 기능이 포함 된 후 angular가 새 모듈이 포함되었음을 알 수 있도록 앱을 다시 시작해야합니다.

내 경우에는 태그 에서 ngNoForm속성 을 제거해야했습니다 <form>.

응용 프로그램에서 FormsModule을 가져오고 싶지만 특정 양식을 건너 뛰려면 ngNoForm 지시문을 사용하면 ngForm이 양식에 추가되지 않습니다.

참조 : https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

방금 라우팅 모듈을 이동했습니다. 즉, FormsModule 및 ReactiveFormsModule 위의 ARoutingModule과 CommonModule 이후의 모듈 배열을 가져옵니다.

올바른 모듈을 가져 오십시오.

"FormsModule"

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

이 오류는 jasmine을 사용하여 단위 테스트 케이스를 각도로 쓰려고 할 때도 발생합니다.

이 오류의 기본 개념은 import FormsModule입니다. 따라서 단위 테스트 파일에서 imports 섹션을 추가하고 해당 파일의 FormsModule을

    TestBed.configureTestingModule
    For eg: 
    TestBed.configureTestingModule({
        declarations: [ XYZComponent ],
        **imports: [FormsModule]**,
    }).compileComponents();

나는 같은 문제가 있었고 다음 명령으로 모든 종속성 (package.json)을 업데이트하여 해결했습니다. npm update -D && npm update -S

@ Günter Zöchbauer가 지적했듯이 FormsModule을 먼저 포함시켜야합니다.