Angular - RouterLinkActive is not working when formControlName is added-CodePudding

I am currently working on a vertical navigation bar the user can navigate to different components. However, I am having an issue when I clicked on the 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 and then it will be active.

Important Note: The routerLinkActive seems not be working ONLY when i added formControlName="name" to the form. The routerLinkActive works fine when I remove it.

Can someone tell me what am I doing wrong?

nav.component.html

<nav>
    <ul >
        <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 >
    <div >
        <!-- Profile Nav -->
        <div >
            <app-nav></app-nav>
        </div>

        <div >
            <h2>Profile Details</h2>

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

                <button type="submit" >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 { }

CodePudding user response：

Have you a formGroup? I guess that, in order to use formControlName you have to have a reactive control, and your code seems not to have it.

I mean about something declared in your code as a formGroup, for instance like 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 >
      <h6>Name: </h6>
      <input type="text" id="name" name="name" formControlName="name"  />
   </div>
   <button type="submit" >Save</button>
</form>

Finally, remeber that for using reactive forms, you have to import in your module (usually in app-routing.module.ts), the ReactiveFormsModule:

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