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

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

RC4에서 "exportAs"가 "ngForm"으로 설정된 디렉티브는 템플릿 때문에 없습니다.

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

boot.ts:

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

// 여기 드롭다운 리스트가 있습니다.

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

//내 컴포넌트 ts:

나는 그것을 다음과 같이 오래된 형태로 표현하고 있었다.

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

그리고 지금 이렇게 하고 있어요

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

그게 그 사건의 원인이라고 생각해?

2.0.0.rc6 이후:

폼: 권장되지 않음provideForms() ★★★★★★★★★★★★★★★★★」disableDeprecatedForms()기능이 제거되었습니다.기능이 제거되었습니다.import 가져오기 세 가져오기 요 가져오십시오.FormsModule아니면 또?ReactiveFormsModule부에서@angular/forms대신.대신.

요컨대:

• 템플릿 기반 양식을 사용하는 경우,@NgModule.
• 모델 기반 양식을 사용하는 경우,@NgModule.

따라서 또는 동등한 항목에 추가합니다.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

다음 모듈 중 하나가 없으면 다음과 같은 오류가 발생할 수 있습니다.

'ngModel'은 'input'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

'formGroup'은 'form'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

"exportAs"가 "ngForm"으로 설정된 지시문이 없습니다.

궁금한 점이 있으면 다음 두 가지를 모두 제공할 수 있습니다.FormsModule 및ReactiveFormsModule함께 사용할 수는 있지만 완전히 기능하는 것은 따로 있습니다.이러한 모듈 중 하나를 제공하면 해당 모듈의 기본 양식 지시문과 공급자를 앱 전체에서 사용할 수 있습니다.

---

「 」를 사용한 폼ngControl

이 있는 @NgModule 아마 거예요.ngControl 것은, 「무슨 일이 가 없기 때문입니다.ngControl새로운 형태로.거의 *에 의해 대체되었습니다.ngModel.

예를 들어 다음과 같습니다.<input ngControl="actionType"><input ngModel name="actionType">이치노

는 「」가 .ngForm'아, 아, 아'가 되었습니다.ngModel 「」, 「」를 치환해 .#actionType="ngForm"#actionType="ngModel".

이렇게 하다)가 합니다.===>된 경우):s(변경된 경우):

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

의 모든 ngControlwas was was was was was was 。ngModel일부 제품은 제거되었거나 현재 다릅니다.를 들면, 「」가 있습니다.name속성, 즉 지금 바로 그 케이스입니다.

저도 같은 문제에 직면했어요.app.modulets의 폼모듈 Import 태그를 놓쳤습니다.

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

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Forms Module을 .spec.ts에 추가하여 해결한 것과 같은 문제가 있었습니다.

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

다음으로 Import를 각각 앞에 추가합니다.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

대신 이 메시지를 받는 경우:

오류: 템플릿 구문 분석 오류:

"exportAs"가 "ngModel"로 설정된 지시문이 없습니다.

이것은 github의 버그로 보고되었습니다.그것은 버그가 아닐 가능성이 있습니다.

1. 구문 오류가 있음(예: 추가 괄호:[(ngModel)]]=), 또는
2. 다음과 같은 반응형 명령어를 혼합하고 있습니다.formControlName명령어를 사용합니다.이는 "Angular v6에서 더 이상 사용되지 않으며 Angular v7에서 제거될 예정"으로, 이는 두 가지 형태 전략을 혼합하여 다음과 같은 결과를 낳기 때문입니다.

• 실제처럼 보이다ngModel디렉티브가 사용되고 있습니다만, 실제로는 입력/출력 속성입니다.ngModel단순히 그 동작에 (일부) 근사한 반응형 지령에서.구체적으로는 값을 취득/설정하고 값 이벤트를 대행 수신할 수 있습니다.단, 님의 기타 기능 중 일부(예를 들어 업데이트 지연 등)는ngModel옵션 또는 지시문 내보내기 - 기능하지 않음(...)

• 이 패턴은 템플릿 기반 및 사후 대응형 전략을 혼합하고 있습니다.이러한 전략은 어느 쪽의 전략도 충분히 활용할 수 없기 때문에 일반적으로 권장하지 않습니다. (...)

• v7 이전에 코드를 업데이트하려면 사후 대응 양식 지침을 고수할지(및 사후 대응 양식 패턴을 사용하여 값을 가져오거나 설정) 또는 템플릿 기반 지침으로 전환할지 결정해야 합니다.

다음과 같은 입력이 있는 경우:

<input formControlName="first" [(ngModel)]="value">

브라우저 콘솔에 혼합 양식 전략에 대한 경고가 표시됩니다.

사용하시는 것 같습니다.ngModel와 같은 형식상의formControlName.

단, 를 추가할 경우ngModel참조 변수의 값으로 사용합니다. 예:

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

그러면 위의 오류가 트리거되고 전략 혼합에 대한 경고는 표시되지 않습니다.

이 문제가 발생했는데 컴포넌트를 변수에 바인딩하지 않았다는 것을 깨달았습니다.

변경되었다.

<input #myComponent="ngModel" />

로.

<input #myComponent="ngModel" [(ngModel)]="myvar" />

내 경우, 나는 추가해야만 했다.FormsModule그리고.ReactiveFormsModule에게shared.module.ts또, 다음과 같습니다.

(코드 예시는 @Unrium 덕분입니다).

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

현재 Angular2의 올바른 사용 방법은 다음과 같습니다.

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

옛날 방식은 더 이상 통하지 않는다.

또한 리액티브 폼과 템플릿 폼의 접근방식을 조합하려고 할 때 이 문제가 발생한다는 것을 깨달았습니다.나는 가지고 있었다#name="ngModel"그리고.[formControl]="name"같은 요소에서.어느쪽인가를 떼어내면 문제가 해결.그리고 만약 당신이 그것을 사용한다면#name=ngModel.[(ngModel)]="name"이치노6, 7, 8번

ngModule하지 않는 것은 시행을 큰따옴표를 합니다.따옴표,따옴표... 큰따옴표를 제거합니다.ngModule

맘에 들다

<input #form="ngModel" [(ngModel)]......></input>

위가 아니라

<input #form=ngModel [(ngModel)]......></input> try this

다 .ngModel and name속성을 선택할 수 있습니다. 형식이 아니기 참조의 과 같습니다 - - Select 。

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

더 한 것은 .FormsModule에 의한 「」의 경우.ReactiveFormsModule반응적 접근의 경우.아니면 둘 다 수입해도 괜찮습니다.

나의 문제는 make form controlname과 ngModel입니다.

[(ngModel)] 근처에 있는 템플릿에 오타가 있어서 이 문제가 발생했습니다.여분의 괄호예:

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">

언급URL : https://stackoverflow.com/questions/38648407/angular2-error-there-is-no-directive-with-exportas-set-to-ngform