Issue with Angular: RouterLinkActive fails to work properly with formControlName

Question

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the component and then click on the same navigation for it to become active.

Important Note: The routerLinkActive does not seem to be functioning ONLY when I added formControlName="name" to the form. The routerLinkActive works fine when I remove it.

Can someone please help me identify what mistake I am making?

nav.component.html

<nav>
    <ul class="side-nav">
        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/profile-details">Profile Details</a>
        </li>

        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/profile-address">My Address</a>
        </li>

        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/profile-card">My Cards</a>
        </li>

        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/profile-password">Change Password</a>
        </li>

        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/settings">Account Settings</a>
        </li>

        <li routerLinkActive="active" tabIndex="1">
            <a routerLink="/privacy">Consent & Privacy</a>
        </li>
    </ul>
</nav>

nav.component.css

.active {
    background-color: rgb(255, 255, 255) !important;
    border-left: 8px solid rgb(0, 185, 173);
}

profile-details.component.html

<div class="profile">
    <div class="row">
        <!-- Profile Nav -->
        <div class="col-3">
            <app-nav></app-nav>
        </div>

        <div class="col-5 details">
            <h2>Profile Details</h2>

            <form class="form">
                <div class="form-group">
                    <h6>Name: </h6>
                    <input type="text" id="name" name="name" formControlName="name" class="form-control" />
                </div>

                <button type="submit" class="btn btn-primary btn-lg">Save</button>
            </form>
        </div>
    </div>
</div>

app-routing.module.ts

const routes: Routes = [
  { path: 'profile', component: NavComponent },
  { path: 'profile-details', component: ProfileDetailsComponent },
  { path: 'profile-address', component: ProfileAddressComponent },
  { path: 'profile-card', component: ProfileCardComponent },
  { path: 'profile-password', component: ProfilePasswordComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'privacy', component: PrivacyComponent }

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

html css angular typescript

Answer 1

Answer №1

Do you have a formGroup set up in your code? It appears that in order to use formControlName, you need to have a reactive control implemented, which doesn't seem to be the case in your current code.

I'm referring to having something defined as a formGroup in your code, similar to this example:

profile-details.component.ts

import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
...

export class ProfileDetailsComponent implements OnInit {
  form: FormGroup;
  ....

  constructor(
    private fb: FormBuilder,
    ...
  ) {...}

  ngOnInit(): void {

    this.form = this.fb.group({
      name: [''],
...
    });

}

profile-details.component.html

<form [formGroup]="form">
   <div class="form-group">
      <h6>Name: </h6>
      <input type="text" id="name" name="name" formControlName="name" class="form-control" />
   </div>
   <button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>

Lastly, don't forget that when using reactive forms, you need to import ReactiveFormsModule in your module (usually in app-routing.module.ts):

import { ReactiveFormsModule } from '@angular/forms';  
@NgModule({  
imports: [  
 // other imports ...  
ReactiveFormsModule  
 ],  
})  
export class AppModule { }

Answer 2

Do you have a formGroup set up in your code? It appears that in order to use formControlName, you need to have a reactive control implemented, which doesn't seem to be the case in your current code.

I'm referring to having something defined as a formGroup in your code, similar to this example:

profile-details.component.ts

import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
...

export class ProfileDetailsComponent implements OnInit {
  form: FormGroup;
  ....

  constructor(
    private fb: FormBuilder,
    ...
  ) {...}

  ngOnInit(): void {

    this.form = this.fb.group({
      name: [''],
...
    });

}

profile-details.component.html

<form [formGroup]="form">
   <div class="form-group">
      <h6>Name: </h6>
      <input type="text" id="name" name="name" formControlName="name" class="form-control" />
   </div>
   <button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>

Lastly, don't forget that when using reactive forms, you need to import ReactiveFormsModule in your module (usually in app-routing.module.ts):

import { ReactiveFormsModule } from '@angular/forms';  
@NgModule({  
imports: [  
 // other imports ...  
ReactiveFormsModule  
 ],  
})  
export class AppModule { }

Issue with Angular: RouterLinkActive fails to work properly with formControlName

Answer №1

Similar questions

Concealed Separator for Text Elements in HTML

"What is the best way to use jQuery to create a toggle effect where one button controls the state

Header Dropdown Problems

Creating a Button with Icon and Text in TypeScript: A step-by-step guide

Click on the button to convert the content of the text area into a variable

Can I integrate @types/pkg into my custom library to automatically have types included?

How can a default value be assigned to an ag-Grid filter?

Trouble arises in AWS Code Pipeline as a roadblock is encountered with the Module

Safari displays text in a noticeably bigger font size compared to other browsers

The readyState of Ajax is consistently anything but 4

Loop through items in a list using Angular.js and display each item within an <

Vue: The enigmatic world of ghost properties?

Assigning a value using HTML code causes the input to malfunction

Managing the combination of <a href/> and <br/> tags simultaneously

What is the best way to prevent or highlight a particular row in a table depending on the line number values using Angular 2 and NgFor?

Guide on populating text boxes in a form automatically using ngFor?

Importing custom pipes in Angular 2 becomes a bit tricky when working with data grouping

Transfer information from session to vue-component

Generic interface function in Typescript

What are the best practices for managing global data in an Angular application?