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]);
/// 여기 내 DropdownList가 있습니다.
<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()
기능이 제거되었습니다. 가져 주시기 바랍니다FormsModule
또는를ReactiveFormsModule
에서@angular/forms
대신.
요컨대 :
- 당신이 사용하는 경우 템플릿 기반의 양식을 추가,
FormsModule
당신에게@NgModule
. - 당신이 사용하는 경우 모델 중심 형태를 추가
ReactiveFormsModule
하여에@NgModule
.
So, add to your app.module.ts
or equivalent:
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 { }
Failing to have one of these modules can lead to errors, including the one you face:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
Can't bind to 'formGroup' since it isn't a known property of 'form'
There is no directive with "exportAs" set to "ngForm"
If you're in doubt, you can provide both the FormsModule
and the ReactiveFormsModule
together, but they are fully-functional separately. When you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide.
Old Forms using ngControl
?
If you do have those modules at your @NgModule
, perhaps you are using old directives, such as ngControl
, which is a problem, because there's no ngControl
in the new forms. It was replaced more or less* by ngModel
.
For instance, the equivalent to <input ngControl="actionType">
is <input ngModel name="actionType">
, so change that in your template.
Similarly, the export in controls is not ngForm
anymore, it is now ngModel
. So, in your case, replace #actionType="ngForm"
with #actionType="ngModel"
.
So the resulting template should be (===>
s where changed):
<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>
* More or less because not all functionality of ngControl
was moved to ngModel
. Some just were removed or are different now. An example is the name
attribute, the very case you are having right now.
I faced the same issue. I had missed the forms module import tag in the app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule,
FormsModule
],
I had the same problem which was resolved by adding the FormsModule to the .spec.ts:
import { FormsModule } from '@angular/forms';
and then adding the import to beforeEach:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ YourComponent ]
})
.compileComponents();
}));
In my case I had to add FormsModule
and ReactiveFormsModule
to the shared.module.ts
too:
(thanks to @Undrium for the code example):
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 { }
I had this problem and I realized I had not bound my component to a variable.
Changed
<input #myComponent="ngModel" />
to
<input #myComponent="ngModel" [(ngModel)]="myvar" />
The correct way of use forms now in Angular2 is:
<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>
The old way doesn't works anymore
If you are getting this instead:
Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel"
Which was reported as a bug in github, then likely it is not a bug since you might:
- have a syntax error (e.g. an extra bracket:
[(ngModel)]]=
), OR - be mixing Reactive forms directives, such as
formControlName
, with thengModel
directive. This "has been deprecated in Angular v6 and will be removed in Angular v7", since this mixes both form strategies, making it:
seem like the actual
ngModel
directive is being used, but in fact it's an input/output property namedngModel
on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some ofngModel
's other features - like delaying updates withngModel
Options or exporting the directive - simply don't work (...)this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. (...)
To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.
When you have an input like this:
<input formControlName="first" [(ngModel)]="value">
It will show a warning about mixed form strategies in the browser's console:
It looks like you're using
ngModel
on the same form field asformControlName
.
However, if you add the ngModel
as a value in a reference variable, example:
<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">
The error above is then triggered and no warning about strategy mixing is shown.
I had this problem because I had a typo in my template near [(ngModel)]]. Extra bracket. Example:
<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">
Check that you have both ngModel and name
attributes in your select. Also Select is a form component and not the entire form so more logical declaration of local reference will be:-
<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>
One more Important thing is make sure you import either FormsModule
in the case of template driven approach or ReactiveFormsModule
in the case of Reactive approach. Or you can import both which is also totally fine.
Also realized this problem comes up when trying to combine reactive form and template form approaches. I had #name="ngModel"
and [formControl]="name"
on the same element. Removing either one fixed the issue. Also not that if you use #name=ngModel
you should also have a property such as this [(ngModel)]="name"
, otherwise, You will still get the errors. This applies to angular 6, 7 and 8 too.
'programing tip' 카테고리의 다른 글
자바 스크립트에서 배열의 최대 크기 (0) | 2020.08.22 |
---|---|
'인스턴스로 전송 된 인식 할 수없는 선택기'오류를 디버그하려면 어떻게해야합니까? (0) | 2020.08.22 |
출력이 파일로 리디렉션 될 때 printf () 및 system ()의 결과가 잘못된 순서로 표시됨 [중복] (0) | 2020.08.22 |
죄와 cos를 함께 계산하는 가장 빠른 방법은 무엇입니까? (0) | 2020.08.22 |
Qt가 모델 / 뷰 용어를 오용하는 이유는 무엇입니까? (0) | 2020.08.22 |