-
You must be signed in to change notification settings - Fork 26.2k
There is no FormControl instance attached to form control element with name: xxx #14057
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
You have to use |
Well as I said, I understand that I am not using the form in the correct way. However, I am concerned if this will potentially create bugs in some other use-cases. In my opinion, if control set-up is called after control clean-up, there should be no error, or maybe I am missing something here ? |
Hi I'm having the same problem, but I tried to reproduce it using one of Angular's examples and it doesn't happen. I can replace and modify the FormGroup without seeing the error. I don't understand why the error isn't showing up. |
@charlieamer, could you find solution to your problem? I am experiencing the exact issue. As @Snesi mentioned, this problem does not happen with Angular's example code. I have tried to compare every single aspect between these apps and can't seem to find why it works in one case and not in other... |
@charlieamer BTW, I have tried to do removeControl and addControl instead of creating new FormGroup and that does not help either. |
Sorry for being off for a long time, I've been away @Snesi. I was trying to find how I solved the problem through my commits, but I couldn't find the solution. Can you please post some of the screenshots of your code @skshirsagar ? |
@charlieamer it is the exact same code that you have in your plunker snippet. |
Here is a plunker forked from yours where I am doing removeControl and addControl instead of creating new FormGroup. It has the exact same as your original one... |
I think I solved the problem by using FormArray, let me just remember how exactly I solved it |
Using FormArray I solved my problem. However I get array as value, which may or may not be what you want. Example output { arr: [ 3, 4] } @Component({
selector: 'my-app',
template: `
<form [formGroup]='form.controls.arr'>
<test formControlName='0'>
</test>
</form>
Form value: {{form.value | json}}
`
})
export class AppComponent implements OnInit {
form = new FormGroup({
arr: new FormArray([new FormControl(3)])
}<
8000
/span>);
ngOnInit() {
setTimeout(() => {
this.form.controls['arr'].push(new FormControl(4));
}, 3000);
}
} |
Hi, I solved my problem too, but I'm not sure how. I ended up refactoring the whole thing and added this little bit of code that might have something to do with it: if(!!this.nTextForm.get(name)){
this.nTextForm.setControl(name, newFormControl)
} else {
this.nTextForm.addControl(name, newFormControl)
} So |
I have the same issue. Using
So, The I tried @Snesi's trick of having a wrapper |
To add more information, in my case the error only happens with nested FormGroups. I was able to go around the issue by creating a FormArray instead of a FormGroup, Something more to add, this wasn't happening in 2.x versions. |
I have the similar issue. But I was able to solve it using |
@nikita-yaroshevich nice catch! In my case it shows the error message on the console but everything seems to work fine. I'm using ionic3 and it works for every component.. the only one that shows that error is the radio, that can be usefull to try to reproduce the error. Maybe (at least for my case) can be something relative to be a formArray, as it may handle radio as a list. |
@nikita-yaroshevich Thank you so much! Any ideas what causes this issue? Also, any plans on fixing this? |
I suspect this has to do with the rendering life cycle. In my case, I am removing an item from the form array... But it looks like there might be a render before this is actually completed.. perhaps because i am using lodash and it might be outside of the zone. |
So, it looks like this has to do with an onTouched event listener on custom controls and is probably a bug. When angular removes a control it registers runs this code
However, a custom control will mark itself as 'touched' or 'changed' after the formControl has been removed, which will cause an error. I'll try and make a minimum reproduction at some point. |
When I use the 0.6.2 version,This BUG will not appear |
I had this error “There is no FormControl instance attached to form control element with name” |
Im also trying to delete a formGroup from my large Reactive FormArray[]
|
I also encounter this problem when using AbstractControl#setControl().
The workaround posted by @nikita-yaroshevich resolved my issue. |
I've the same problem using custom form field component (implementing <app-my-custom-form-control formControlName="myField"></app-my-custom-form-control> From what can I see, when I call this.form = buildForm(); when I want to have fresh instance of it on some conditions change, there is registered function ƒ () { return _noControlError(dir); } as onChange() callback. Then It's also solved by @nikita-yaroshevich workaround with using <app-my-custom-form-control [formControl]="form.controls['myField']"></app-my-custom-form-control> |
This bug is really bad! The point of having interfaces are that they should guarantee to work with the components and modules that uses them. It got solved for me using the same as everyone else, except I use the getter on my form.
|
as a workaround instead of recreating the form group it is possible to reset it's value
|
Solution by @nikita-yaroshevich is great, but this really needs to be fixed. Referencing a control this way is not practical at all. Almost all the custom components, in my application, that implement |
I've managed to solve this error for custom form control component. The problem was emitting change event when form was re-created and new value was assigned to component. Small example - I hope it will help some of you, cause the problem may be the same for few people here: @Component({
selector: 'app-custom-form-control',
templateUrl: './custom-form-control.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomFormControlComponent),
multi: true
}
]
})
export class CustomFormControlComponent implements OnInit, ControlValueAccessor {
form = this.fb.group({
firstname: [''],
lastname: [''],
});
private onChange: (value: any) => void = () => null;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.emitValueChanges();
}
private emitValueChanges() {
this.form.valueChanges.subscribe(data => { // TODO Unsubscribe in ngOnDestroy
this.onChange(data);
});
}
writeValue(value: any): void {
this.form.setValue(value, {
emitEvent: false, // THIS WAS THE MISSING PART
});
}
registerOnChange(fn: (value: any) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
// TODO Implement
}
setDisabledState(isDisabled: boolean): void {
isDisabled ? this.form.disable() : this.form.enable();
}
} Component usage: <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
<app-custom-form-control formControlName="name"></app-custom-form-control>
<button type="submit" [disabled]="myForm.invalid">Submit</button>
</form> Recreating |
same here when using
|
We just ran in to this same issue. The template changes didn't work for us so we went back to our custom form controls and found out we were implementing them incorrectly since it only happened with three of our seven custom form controls. The changes made to our three form controls that were affected were all different, but it came down to the problem of calling the onChange in the value setter which is initially set in the writeValue of the component. So I don't know if this is a bug with Angular if it can be fixed by restructuring a custom form control. I made a stackblitz that duplicates the error with some comments in the custom form control so you can see how we went about fixing it. Thank you everyone for the tips it helped a lot figuring this thing out. https://stackblitz.com/edit/angular-cyuhs5 In case the stackblitz ever messes up here's the custom form control component
and here's the form component
|
is there any better alternative to angular reactive forms? Could not count times trying to figure out what's wrong in my code (especially impl. control value accessor), finding out that I'm using not right syntax for particular case although [formControl] and [formControlName] syntaxes counter-intuitively seems dual. thx |
To add to this comment from @m-radzikowski: In my case I was using: writeValue(value: any): void {
this.form.controls['button'].setValue(value, {
emitEvent: false,
});
} Using private emitValueChanges() {
this.form.controls['button'].valueChanges.subscribe(() => this.onChange());
} |
@m-radzikowski solution works. Thanks for sharing your solution. After playing around a bit, I fixed mine by checking for falsy in writeValue() method. See below reference.
|
5 years after issue creation and still forms cause this bug. Are you going to fix it? |
Same issue, we create the form when the entity changes (using rxjs). Throws the error:
Works correctly:
|
This is still an issue with Angular 14. This comment solved it for me. |
I've another solution that worked for me. I emit the form as an Observable like this
The interesting part is:
I basically interlace null values between each form. Like
|
It's been 7 years and Angular team still decide bug like this is not worth fixing? |
We experienced a similar issue using Angular 18. We were removing a control, performing some logic, and adding the control again, and the error occurred interminantly. We solved it by detecting changes before adding the control.
|
8 years now :) Glad we could change our code to initialize the form group exactly one time (it's a Create/Edit form). Definitely sunk too much time into chasing this issue down though. Kind of a low hanging enhancement - maybe update the error message to suggest initializing the form once? Or even just linking to this GitHub issue? I remember there was an initiative in angular to make error messages more helpful. If this bug is not going to be addressed, at least update the error message to offer some workarounds or guidance. |
I'm submitting a ... (check one with "x")
Current behavior
When using ReactiveForms and we override old form group with the new one (using for example
this.form = new FormGroup(...)
) an error occurs (the error is mentioned in the title).(The error can be seen in console).
Expected behavior
No error happens.
Minimal reproduction of the problem with instructions
http://plnkr.co/jVMbtQGKeYhPsCkrzQN8
The error can be seen after 3 seconds (I used set timeout in the example). Error should be visible in console.
What is the motivation / use case for changing the behavior?
I understand that this is not the best way to use form groups, i should check if they are already created, and create it only if necessary. However, this bug indicates (I concluded this from stacktrace) that control set-up doesn't work after it's been cleaned up. This should not be the case. Problem occurs because Angular's cleanUpControl function sets up change callback to its own handler (the handler just throws error), and then in setUpControl function, Angular calls write value BEFORE it registers callback handler. It means that the last handler remembered by the custom control was cleanUpControl's handler which only throws an error. Functions setUpControl and cleanUpControl can be found in
@angular/forms/src/directives/shared.js
Please tell us about your environment:
Project is set-up using angular-cli, but it doesn't really affect the problem if I change the setup.
2.4.4
I tested this on Chrome and Firefox, they both reproduce the problem
Typescript
node --version
=The text was updated successfully, but these errors were encountered: