角13添加[formGroup]禁用routerlinkActive

Question

我的headerComponent中有一个导航栏和一个按钮(打开一个包含注册表单的模式)，问题是当我将formGroup添加到注册表单routerlinkActive不再工作header.component.html 导航栏部件时

 <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>

这是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>

这是没有[formGroup]的结果。

这是与[formGroup]

Answer 1

通过将formGroup添加到表单中，将formControlName添加到输入中，routerlinkActive不再起作用，您应该将其添加到my.component.ts中。

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