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.

그래서, 귀하app.module.ts 또는 동등한 항목에 추가하십시오 .

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 { }

이러한 모듈 중 하나가 없으면 직면 한 오류를 포함하여 오류가 발생할 수 있습니다.

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

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

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

당신이 의심이 있다면, 당신은 둘 다 제공 할 수FormsModule 과를ReactiveFormsModule 함께,하지만 그들은 개별적으로 완벽한 기능입니다. 이러한 모듈 중 하나를 제공하면 해당 모듈의 기본 양식 지시문 및 공급자를 앱 전체에서 사용할 수 있습니다.

사용하는 이전 양식 ngControl?를

에 해당 모듈 이있는 경우 새 양식에 없는 것이기 때문에 문제가되는 @NgModule과 같은 이전 지시문을 사용하고있을 수 있습니다 . 다소 교체되었습니다ngControlngControl * 되었습니다 ngModel.

예를 들어, <input ngControl="actionType"> 것은 <input ngModel name="actionType">이므로 템플릿에서 변경하십시오.

마찬가지로 컨트롤의 내보내기는 ngForm더 이상 이 아니며 이제 ngModel. 따라서 귀하의 경우 #actionType="ngForm"에는#actionType="ngModel" .

따라서 결과 템플릿은 다음과 같아야합니다 ===>.

<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>

*의 모든 기능이 ngControl로 이동 된 것은 아니기 때문에 다소간 ngModel입니다. 일부는 방금 제거되었거나 지금 다릅니다. 예를 들어 name속성, 바로 지금 가지고있는 경우입니다.

나는 같은 문제에 직면했다. app.module.ts에서 양식 모듈 가져 오기 태그를 놓쳤습니다.

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

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

.spec.ts에 FormsModule을 추가하여 해결 된 동일한 문제가 발생했습니다.

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

그런 다음 beforeEach에 가져 오기를 추가합니다.

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

대신 이것을 얻는 경우 :

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

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

github 에서 버그 로 보고 된 경우 다음과 같이 할 수 있으므로 버그가 아닐 가능성이 높습니다.

1. 구문 오류가 있습니다 (예 : 추가 대괄호 :) [(ngModel)]]=, 또는
2. 수 반응성 형태 지시 혼합 등을 formControlName, 와 ngModel지시어 . 이것은 "Angular v6에서 더 이상 사용되지 않으며 Angular v7에서 제거 될 것입니다" . 두 양식 전략이 혼합되어 다음과 같이 만들어집니다.

• 실제 ngModel지시어가 사용되는 것처럼 보이지만 실제로 ngModel는 단순히 동작 (일부)을 근사화하는 반응 형 지시문에 명명 된 입력 / 출력 속성 입니다. 특히, 값을 가져 오거나 설정하고 값 이벤트를 가로 챌 수 있습니다. 그러나 옵션으로 업데이트를 지연 하거나 지시문을 내보내는 등 의 다른 기능 중 일부는 ngModel작동하지 않습니다. (...)ngModel

• 이 패턴은 템플릿 기반 및 반응 형 양식 전략을 혼합 합니다 .이 전략은 두 전략의 전체 이점을 활용하지 않기 때문에 일반적으로 권장하지 않습니다 . (...)

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

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

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

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

.NET과 ngModel동일한 양식 필드에서 사용중인 것 같습니다 formControlName.

그러나 ngModel참조 변수의 값으로 를 추가하는 경우 예 :

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

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

내 경우에는 내가 추가했다 FormsModule과 ReactiveFormsModule받는 사람shared.module.ts 이 너무 :

( 코드 예제에 대한 @Undrium에게 감사드립니다 ) :

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 { }

이 문제가 있었고 구성 요소를 변수에 바인딩하지 않았 음을 깨달았습니다.

변경됨

<input #myComponent="ngModel" />

에

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

이제 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=ngModelthis와 같은 속성도 있어야합니다 [(ngModel)]="name". 그렇지 않으면 여전히 오류가 발생합니다. 이것은 각도 6, 7 및 8에도 적용됩니다.

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의 경우 또는 Reactive 접근 방식의 경우 가져 오기를 확인하는 것입니다 . 또는 완전히 괜찮은 두 가지를 모두 가져올 수 있습니다.

ngModule입력에서 작동하지 않는 경우 try ... 큰 따옴표를 제거하십시오.ngModule

처럼

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

위 대신

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

[(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">