There is no FormControl instance attached to form control element with name

Question

I have created a form in Angular 2 with which users can edit a SearchProfile which they can select from a list. Initially everything works fine but when i select a different item from the list of SearchProfiles I receive the following exception: There is no FormControl instance attached to form control element with name: controlName. The whole thing consists of 3 elements: 2 components SelectProfileComponent, SearchProfileComponent and a service ProfileService. ProfileService contains the ActiveProfile which is the selected SearchProfile for editing. ProfileService looks like this:

@Injectable()
export class ProfileService {
    private activeProfileSource = new ReplaySubject<ISearchProfile>();
    activeProfile$ = this.activeProfileSource.asObservable();

    constructor(private http: Http) {
        this.selectProfile();
    }

    public getSearchProfile(profileId: number = null): Observable<ISearchProfile> {
        let url = `<url>?profileid=${profileId}`;
        this.http.get(url).map((result) => {
            return <ISearchProfile>.result.json();
        });
    }

    public selectProfile(profileId: number = null) {
        this.getSearchProfile(profileId).subscribe((p) => {
            this.activeProfileSource.next(p);
        });
    }
}

SelectProfileComponent contains a list with profile which triggers a change-event when a SearchProfile is selected.

<select (change)="setActiveProfile($event.target.value)">
    <option *ngFor="let profile of profiles" [value]="profile.Id" [innerHtml]="profile.name"></option>
</select>

export class ProfileSelectionComponent implements OnInit {
    private profiles: ISearchProfile[] = null;

    constructor(private profileService: ProfileService) {}

    //get profiles logic

    public setActiveProfile(profileId: number): void {
        this.profileService.selectProfile(profileId);
    }
}

The SearchProfileComponent has a Subscription to the activeProfile and should show the properties of the activeProfile so the user can edit them. SearchProfileComponent looks like this:

<form [formGroup]="profileForm" *ngIf="!isLoading">
    <input type="text" name="name" formControlName="name" [(ngModel)]="searchProfile.name" />
</form>

export class SearchProfileComponent implements OnInit {
    private isLoading: boolean = true;
    private activeProfileSubscription: Subscription;
    private searchProfile: ISearchProfile = null;
    public profileForm: FormGroup;

    constructor(private profilService: ProfileService
        private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.activeProfileSubscription = this.profileService.activeProfile$.subscribe((profile: ISearchProfile) => {
            this.searchProfile = profile;
            this.createForm();
            this.isLoading = false;
        });
    }
    private createForm() {
        this.profileForm = this.formBuilder.group({
            ["name"]: [this.searchProfile.name, null]
        });
    }
}

Kuzenko Lubko · Accepted Answer · 2023-09-04 07:54:17Z

97

I solved it in this way:

Before:

formControlName="description"

After:

[formControl]="form.controls['description']"

edited Sep 4, 2023 at 7:54

answered Dec 12, 2018 at 13:57

Kuzenko Lubko

2,1191 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

benshabatnoam Over a year ago

Thanks @Kuzenko Lubko this is working! I was wondering, this looks like a bug, can you tell why formControlName isn't working in this case?

Kuzenko Lubko Over a year ago

@benshabatnoam maybe because form will be created after async request. If you are using formControlName you should have form created before view render.

benshabatnoam Over a year ago

You're kind of right, I'm building the formGroup dynamically after the view was rendered, but I have an *ngIf on my form. I guess this is the problem. Thanks!

MortimerCat Over a year ago

I was only crashing on my up/down arrows in my number control, this cured it. So it was something happening with the view rendering.

hephi808 Aug 1 at 8:17

I create a custom control within a formArray, thing was okie after form rendered but later when I trigger change to load new form value it's show the issue. your solution do fix it while the copilot don't see this solution :(

Saad Khan · Accepted Answer · 2020-10-16 08:58:21Z

6

I solved this issue by initializing form once in the component constructor i.e.

constructor() {
        this.form = this.initForm();
}

OR

ngOnInit() {
        this.form = this.initForm();
}

and remove the re-initialization of the form in the component anywhere in the component without constructor i.e.

this.form = this.initForm();

edited Oct 16, 2020 at 8:58

answered Oct 16, 2020 at 7:44

Saad Khan

1191 silver badge5 bronze badges

1 Comment

Najm Us Saqib Over a year ago

Thanks, My issue was due to else condition in edit form, where I was checking for data to fill the form or if data is not present then re-initializing the form. @Saad

atwright147 · Accepted Answer · 2021-02-14 15:31:03Z

4

The creation of your FormGroup is a little bit wrong. You dont need to wrap the control name in brackets and double quotes. Read more about reactive forms on official angular docs.

Change your creation of FormGroup from this:

this.profileForm = this.formBuilder.group({
            ["name"]: [this.searchProfile.name, null]
});

to this:

this.profileForm = this.formBuilder.group({
            name: [this.searchProfile.name]
});

And you should make some changes in your html. Hint: If you are using reactive forms, you don't need [(ngModel)] on inputs, remove that. Here is right html for you input:

<form [formGroup]="profileForm" *ngIf="!isLoading">
    <input type="text" name="name" formControlName="name" />
</form>

edited Feb 14, 2021 at 15:31

atwright147

3,8414 gold badges35 silver badges60 bronze badges

answered Mar 15, 2018 at 10:52

Gregor Doroschenko

11.7k6 gold badges28 silver badges37 bronze badges

Comments

Kthree · Accepted Answer · 2024-10-28 08:53:18Z

0

We experienced a similar issue using angular 18. We were removing a control perfoming some logic and adding the control again. The error was occuring interminantly.

We solved it by detecting changes before adding the control. i.e adding the line this.cdr.detectChanges()

this.formGroup.removeControl(field, {
  emitEvent: false,
});
 ...
 //some logic here
 ...
this.cdr.detectChanges()
this.formGroup.addControl(field, {
  emitEvent: false,
});

edited Oct 28, 2024 at 8:53

answered Oct 28, 2024 at 8:44

Kthree

3903 silver badges17 bronze badges

Comments

Brandon Pittman · Accepted Answer · 2020-10-27 02:03:51Z

-2

I found that using the [formControl]="$form.something" method worked well. Clunky, but that's Angular for you.

answered Oct 27, 2020 at 2:03

Brandon Pittman

1

Collectives™ on Stack Overflow

There is no FormControl instance attached to form control element with name

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related