Подтвердить что ты не робот

Что вызывает ошибку "control.registerOnChange не является функцией"

У меня есть форма с использованием подхода реактивной формы. Форма создается следующим образом в моем мопсе:

form([formGroup]='form', novalidate='', (ngSubmit)='postSurvey(form.value, form.valid)')

Все работает хорошо, за исключением случаев, когда я пытаюсь изменить форму (которая является FormArray) в части JavaScript. Я получаю следующую ошибку:

EXCEPTION: Error in http://localhost:8080/app/components/fillForm.template.html:0:326 caused by: control.registerOnChange is not a function
core.umd.js:3497 TypeError: control.registerOnChange is not a function
    at setUpControl (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:1634:17)
    at eval (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4752:25)
    at Array.forEach (native)
    at FormGroupDirective._updateDomValue (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4747:29)
    at FormGroupDirective.ngOnChanges (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4616:22)
    at Wrapper_FormGroupDirective.ngDoCheck (/ReactiveFormsModule/FormGroupDirective/wrapper.ngfactory.js:30:18)
    at View_FillFormComponent2.detectChangesInternal (/AppModule/FillFormComponent/component.ngfactory.js:275:32)
    at View_FillFormComponent2.AppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12592:18)
    at View_FillFormComponent2.DebugAppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12739:48)
    at ViewContainer.detectChangesInNestedViews (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12850:41)
    at CompiledTemplate.proxyViewClass.View_FillFormComponent0.detectChangesInternal (/AppModule/FillFormComponent/component.ngfactory.js:64:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12592:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12739:48)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12577:22)
    at CompiledTemplate.proxyViewClass.View_FillFormComponent_Host0.detectChangesInternal (/AppModule/FillFormComponent/host.ngfactory.js:29:19)

Мой код для изменения формы довольно сложен, и я не могу упростить его или воспроизвести в плунжере. Больше, чем нахождение прямого решения (это слишком сложно с таким небольшим количеством деталей), я хотел бы понять, что означает эта ошибка? И что может вызвать эту ошибку.

Я понял, что ошибка происходит в [formGroup]='form' в моем HTML.

Любое предложение поможет.

Обновление Я подал проблему на угловой github здесь и предложил исправить здесь Плункер, чтобы воспроизвести проблему здесь

4b9b3361

ОТВЕТЫ

Ответ 1

Да, это сообщение об ошибке является немного загадочным, но если вы используете FormBuilder, вы увидите это, когда добавили элемент управления FormGroup в свой компонент и назвали его "A", но затем либо забыл добавить вход с formControlName = "A" в ваш шаблон, либо formControlName для предполагаемого ввода не является A, или пустым или нет.

В основном, он говорит: "Я не могу сопоставить элемент управления, который у меня есть в FormGroup, с элементом управления в шаблоне".

Ответ 2

Я столкнулся с поиском решения подобной проблемы, а затем нашел решение самостоятельно. Моя проблема заключалась в следующем. У меня была такая форма

form: FormGroup = new FormGroup({
  status: new FormArray([])
});

Первоначально он был представлен списком флажков для каждого состояния в шаблоне. И затем я создал пользовательский компонент для представления селектора status и использовал его в шаблоне следующим образом

<status-selector [formControlName]="'status'"></status-selector>

Проблема заключается в том, что formControlName должен указывать на экземпляр FormControl, но на самом деле он указывал на экземпляр FormArray. Таким образом, переход на status: new FormControl([]) исправил эту проблему для меня.

Ответ 3

Я также столкнулся с этой ошибкой при смешивании шаблонов с реактивными подходами (по ошибке):

<input #inputCtrl
       [formControl]="inputCtrl"
/>

inputCtrl был правильно определен в компоненте. Конечно, #inputCtrl должен быть #inputCtrl для работы (было трудно увидеть, когда вход имел около 10 атрибутов).

Ответ 4

Возможно, вы перемещали элемент управления вне группы в шаблоне.

OK:

<div formGroupName="passwordForm">
     Password: <input type="password" formControlName="password">
     Confirm: <input type="password" formControlName="confirmPassword">
</div>

Не в порядке:

Password: <input type="password" formControlName="password">
<div formGroupName="passwordForm">
     Confirm: <input type="password" formControlName="confirmPassword">
</div>

Ответ 5

Эта ошибка также появляется, когда мы используем реактивную форму внутри ng-template вместе с *ngIf.

Чтобы избежать этого, используйте ng-container и не используйте ngElse.

Ответ 6

Если вы определили поле FormArray в вашей форме, обратите внимание, что вам НЕ нужно помечать его с помощью formControlName = "". Вам нужно обрабатывать ввод и проверку другими способами (сеттерами, геттерами, функциями), но вы обязательно получите ошибку, если попытаетесь присвоить formControlName для FormArray!