Open
Description
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
This is still an issue: #10036
<form [formGroup]="form">
<input type="text" formControlName="control"/>
<input type="text" formControlName="control"/>
</form>
Updating one control should automatically update the state of the other controls. Otherwise the UI is out of sync with the model. Sometimes multiple controls with the same name are needed for responsive layouts.
Was able to work around it with this custom directive (based on some of the solutions in that linked issue)
import { DestroyRef, Directive, OnInit, inject } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { NgControl } from "@angular/forms";
@Directive({
/* eslint-disable */
selector: "[formControlName],[formControl]",
standalone: true,
})
export class FormControlSyncDirective implements OnInit {
controlDirective = inject(NgControl);
destroyRef = inject(DestroyRef);
ngOnInit() {
this.controlDirective?.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
this.controlDirective.control.setValue(value, { emitEvent: false });
});
}
}
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
When using formControl or formControlName multiple times, the updating one control did not cause the others to update. They no longer reflected the true model state.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.1.4
Node: 16.20.0
Package Manager: npm 8.19.4
OS: darwin arm64
Angular: 16.1.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, material-date-fns-adapter, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.4
@angular-devkit/build-angular 16.1.4
@angular-devkit/core 16.1.4
@angular-devkit/schematics 16.1.4
@angular/cli 16.1.4
@schematics/angular 16.1.4
rxjs 7.4.0
typescript 5.1.6
Anything else?
No response
Metadata
Metadata
Assignees
Labels
An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent