angular 13 adding [formGroup] disables routerlinkActive

Question

i have a navbar in my headerComponent and a button (opens a modal which contains a sign up form) the problem is when i add [formGroup] to the sign up form routerlinkActive no longer works header.component.html navbar part:

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" id="navitem1" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"> 
        <a class="nav-link" href="" >
          <i class="fa fa-home"></i>
          Home
          <span class="sr-only">(current)</span>
          </a>
      </li>
      <li class="nav-item" id="navitem2" routerLink="/orders" routerLinkActive="active">
        <a class="nav-link" href="orders">
          <i class="fa fa-globe">
          </i>
          orders
        </a>
      </li>
      <li class="nav-item" id="navitem3">
        <a class="nav-link" href="services" routerLink="/services" routerLinkActive="active">
          <i class="fa fa-list">
          </i>
          sevices
        </a>
      </li>
      <li class="nav-item" id="navitem4" routerLink="/contact" routerLinkActive="active">
        <a class="nav-link" href="contact">
          <i class="fa fa-at">
          </i>
          contact us
        </a>
      </li>

    </ul>
</div>

this is the sign up form code in header.component.html:

<form  class="form-control bg-light">
            
            <div class="d-flex flex-row align-items-center mb-2">
              <i class="fa fa-user fa-lg me-3 fa-fw"></i>
              <div class="form-outline flex-fill mb-0">
                <label class="form-label" for="form3Example1c" >Nom</label>
                <input  type="text" name="name" id="name"  class="form-control" required ngModel />
              </div>
            </div>

            <div class="d-flex flex-row align-items-center mb-2">
              <i class="fa fa-envelope fa-lg me-3 fa-fw"></i>
              <div class="form-outline flex-fill mb-0">
                <label class="form-label" for="form3Example3c">Email</label>
                <input type="email"  id="email" name="email" class="form-control"  required ngModel/>
              </div>
            </div>

            <div class="d-flex flex-row align-items-center mb-2">
              <i class="fa fa-lock fa-lg me-3 fa-fw"></i>
              <div class="form-outline flex-fill mb-0">
                <label class="form-label" for="form3Example4c">Password</label>
                <input type="password" id="pwd" name="pwd" class="form-control" required="true" ngModel />
              </div>
            </div>

            <div class="d-flex flex-row align-items-center mb-4">
              <i class="fa fa-key fa-lg me-3 fa-fw"></i>
              <div class="form-outline flex-fill mb-0">
                <label class="form-label" for="pwd2">Repeat password</label>
                <input type="password" id="pwd2" name="pwd2" class="form-control" required ngModel/>
              </div>
            </div>
            <div class="form-check d-flex mb-5"> 
              <input class="form-check-input me-2" type="checkbox"  id="check" required/>
              <label  for="check">
                I agree to all statements in <a href="#!">terms of use</a>
              </label>
            </div>
            <!-- SIGN UP BUTTON BUTTON BUTTON -->
            <button type="submit" class="btn btn-success" (click)="onClickSubmit()">Sign up</button>
          </form>

this is the result without [formGroup]

and this is with [formGroup]

Answer 1

by adding [formGroup] to the form and formControlName to inputs routerlinkActive no longer works you should add this to my.component.ts

 signupform =new FormGroup({
name:new FormControl(),
email:new FormControl(),
pwd:new FormControl(),
pwd2:new FormControl()
  });