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

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

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

directiveexportAs'로 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.
           ],
  ....
})

Import를 .FormsModule루트 AppModule뿐만 아니라 각도 형태의 지시어를 사용하는 모든 서브모듈에도 적용됩니다.

// SubModule A

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

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

가가 i i i i i를 했습니다.ReactiveFormsModuleimports[]어레이를 사용하여 이 오류를 해결합니다.

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

수정:

module.ts:

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

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'

Forms Module Import 여부를 확인합니다.새로운 형식의 Angular 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>

이것.

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

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

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

주의해야 할 3가지 사항:

1. , 「」를 할 .FormModule하다

   imports:[CommonModule, HttpModule, FormsModule]
   

2. .FormModule「 」:

   exports:[FormsModule]
   

   조합하면 다음과 같습니다.

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

3. 맨 Import해야 .FormsModule:

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

---

「 」만하고 있는 는,app.module.ts내보낼 필요가 없습니다.수입하다.

로그인 컴포넌트 ts 파일에 폼 모듈을 Import하는 것 외에 NgForm도 Import해야 합니다.

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

이것으로 문제가 해결되었습니다.

다른 항목 확인:

app.modulets의 @NgModule 선언 배열에 컴포넌트가 추가되었는지 확인합니다.

@NgModule({
declarations: [
    YourComponent,
],

「 」를 하고 있는 ng generate componentapp.display 。

나는 같은 이유로 이 같은 질문을 몇 번이고 반복해 왔다.제가 뭘 잘못했는지 말씀드리겠습니다.누군가에게 도움이 될 수도 있어요.

는 '컴포넌트 만들기'를 통해서 있었어요.angular-cli

ngg c 컴포넌트/뭔가/뭔가

내가 원하는 대로 컴포넌트를 만들었습니다.

또한 구성 요소를 생성하는 동안 App Module의 선언 배열에 구성 요소를 추가했습니다.

이 경우 제거해 주세요.그리고 Voila!작동할 것 같다.

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

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

app.disc.ts에서 다음과 같은 오류를 영구적으로 해결합니다."cannot bind [formGroup] or no directive with export as".

이미 Import한 경우FormsModule를 삭제하기만 하면 됩니다.formControlName='whatever'입력 필드로부터.

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

이 오류의 기본 개념은 다음과 같습니다.import FormsModule따라서 유닛 테스트용 파일에는 Imports Section을 추가하고 Forms Module을 그 파일 아래에 배치합니다.

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

제 경우, app.module.ts의 선언 배열에 컴포넌트를 추가하는 것을 잊어버려서 voila! 문제가 수정되었습니다.

그래, 나도 같은 문제에 직면했어...나는 무엇보다도 일을 하지 않았다.이걸로 내 문제가 해결됐어angular 'with'를 strict 모드로 사용하고 있기 때문입니다.

app.disc.ts에서 이 코드를 추가합니다.

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

imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule
],

그리고 .html 파일에서 NgForm을 사용하는 파일

<form #form="ngForm" (ngSubmit)="loginSubmit(form);">
</form>

및 .ts 파일에 있습니다.

import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
  NgForm=NgForm;//this one solve my problem...initialization and declaration
}

거의 모든 답변이 다음 중 하나를 추가하는 것에 대해 언급하고 있습니다.FormsModule모듈은 이미 Import가 완료되어 있습니다.질문에 대한 답변에서 설명한 바와 같이 VScode를 닫았다가 다시 시작해야 합니다. 그렇지 않으면 "Save workspace as..."를 사용하여 워크스페이스를 저장해야 합니다. 그러면 모든 것이 정상적으로 작동합니다.

이미 Import하여 추가한 경우FormsModule사용하는 서브모듈에 접속해도 에러가 발생합니다.

1. 루트 AppModule을 추가하지 못할 수 있습니다.(가끔씩 일어나기도 하지만) 2. 관련 패키지를 추가하여 systemjs.config.js에서 참조했는지 확인합니다.

ctrl+c로 앱을 종료하고 ng serve로 재실행해야 합니다.만약 Forms Module을 앱에 포함하지 않았다면.모듈 파일이 어레이를 Import하고 나중에 추가된 angular는 이를 인식하지 못하고 모듈을 재스캔하지 않으면 angular가 새 모듈이 포함된 것을 확인할 수 있도록 앱을 재시작해야 합니다.이 템플릿 dri의 모든 기능을 포함하는 것을 알 수 있습니다.ve 어프로치

내 경우엔, 난 그 부분을 제거해야만 했어ngNoForm나의 속성<form>태그를 붙입니다.

어플리케이션에서 Forms Module을 Import하고 싶지만 특정 폼을 건너뛸 경우 ngNoForm 디렉티브를 사용하면 ngForm이 폼에 추가되지 않습니다.

참고 자료: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

라우팅 모듈(ARouting Module 등)을 Forms Module 및 Reactive Forms Module 위 및 모듈 Import에서 Common Module 다음으로 이동했습니다.

FormsModule을 선언해야 하며 Component도 선언해야 합니다.

declarations: [
   YourComponent  -->
  ],
  imports: [
    BrowserModule,
    FormsModule, -->

    
  ],

@micronyks가 제공하는 솔루션에 동의하지만 모듈이 많지 않은 심플한 어플리케이션의 경우에는 해당됩니다.그렇지 않은 경우, 모든 모듈 또는 전체 애플리케이션에 공개하지 않으려면 해당 <form #loginForm="ngForm"> 요소를 사용하고 있는 모듈과 동일한 방법으로 해당 모듈 내에 아래 코드를 추가해야 합니다.

import FormsModule from '@angular/forms';
@NgModule{
imports: [FormsModule],
}

.HTML 파일 <폼(ngSubmit)>="Addredients(f)" #f="ngForm">

.ts 파일@ViewChild('f', {static: false }) slForm: NgForm;

HTML에서 업데이트된 ngForm에서 NgForm으로 작업했습니다.

당신의 app.module.ts에서

꼭 확인해 주세요.

1. Import의 Forms Module

2. 선언의 Sample Component

언급URL : https://stackoverflow.com/questions/39559296/typescript-s-angular-framework-error-there-is-no-directive-with-exportas-set