选择不同的选项卡不会更新内容 | Angular

Question

我使用 Bootstrap 创建了四个选项卡，并在每个相应的选项卡中放置了一个表单标签。我的问题是，即使我切换到另一个选项卡，第一个标签的表单数据仍然存在。我该如何更改？

.HTML 分量：

<ul
  ngbNav
  #nav="ngbNav"
  [(activeId)]="active"
  (navChange)="onNavChange($event)"
  class="nav-tabs"
>
  <li [ngbNavItem]="1">
    <a ngbNavLink>Privacy Policy</a>
    <ng-template ngbNavContent>
      <form>
        <br />
        <label>Heading (Privacy Policy)</label><br />
        <input type="text" />
        <br />
        <br />
        <label>Content</label>
        <angular-editor
          id="editor1"
          formControlName="htmlContent"
          [config]="editorConfig"
        ></angular-editor>
        <br />
        <button class="btn btn-danger">Save Changes</button>
      </form>
    </ng-template>
  </li>
  <li [ngbNavItem]="2">
    <a ngbNavLink>Terms and Conditions</a>
    <ng-template ngbNavContent>
      <form>
        <br />
        <label>Heading (T&C)</label><br />
        <input type="text" />
        <br />
        <br />
        <label>Content</label>
        <angular-editor
          id="editor2"
          formControlName="htmlContent"
          [config]="editorConfig"
        ></angular-editor>
        <br />
        <button class="btn btn-danger">Save Changes</button>
      </form>
    </ng-template>
  </li>
  <li [ngbNavItem]="3">
    <a ngbNavLink>I can't be selected on click</a>
    <ng-template ngbNavContent>
      <p>
        Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget
        sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae
        odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
        congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
        pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut
        ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu.
        Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi
        ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet
        odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel
        tellus pulvinar feugiat.
      </p>
    </ng-template>
  </li>
  <li [ngbNavItem]="4" [disabled]="disabled">
    <a ngbNavLink>I'm disabled</a>
    <ng-template ngbNavContent>
      <p>
        Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget
        sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae
        odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
        congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
        pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut
        ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu.
        Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi
        ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet
        odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel
        tellus pulvinar feugiat.
      </p>
    </ng-template>
  </li>
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

<div class="mb-3">
  <button
    class="btn btn-sm btn-outline-primary"
    [disabled]="active === 2"
    (click)="nav.select(2)"
  >
    Select second tab
  </button>
  <button
    class="btn btn-sm btn-outline-primary ml-2"
    (click)="toggleDisabled()"
  >
    Toggle last disabled
  </button>
</div>

Active: {{ active }}

.ts 组件：

import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css'],
})
export class TabsComponent implements OnInit {
  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '500px',
    minHeight: '0',
    maxHeight: 'auto',
    width: 'auto',
    minWidth: '0',
    translate: 'yes',
    enableToolbar: true,
    showToolbar: true,
    placeholder: 'Enter text here...',
    defaultParagraphSeparator: '',
    defaultFontName: '',
    defaultFontSize: '',
    fonts: [
      { class: 'arial', name: 'Arial' },
      { class: 'times-new-roman', name: 'Times New Roman' },
      { class: 'calibri', name: 'Calibri' },
      { class: 'comic-sans-ms', name: 'Comic Sans MS' },
    ],
    customClasses: [
      {
        name: 'quote',
        class: 'quote',
      },
      {
        name: 'redText',
        class: 'redText',
      },
      {
        name: 'titleText',
        class: 'titleText',
        tag: 'h1',
      },
    ],
    uploadUrl: 'v1/image',
    uploadWithCredentials: false,
    sanitize: true,
    toolbarPosition: 'top',
    toolbarHiddenButtons: [['bold', 'italic'], ['fontSize']],
  };

  active: number;
  disabled = true;

  constructor() {}

  ngOnInit(): void {}

  onNavChange(changeEvent: NgbNavChangeEvent) {
    if (changeEvent.nextId === 3) {
      changeEvent.preventDefault();
    }
  }

  toggleDisabled() {
    this.disabled = !this.disabled;
    if (this.disabled) {
      this.active = 1;
    }
  }
}

当我更改选项卡时，我可以看到 active 变量已更新，但它不会更改表格。为什么会这样？我可以做些什么来改变它？

编辑 - 我试过使用 ng-container 而不是 ng-template 但它所做的只是堆叠表格，让我无法使用制表符。

Answer 1

问题是 formControlName，它引发了错误 formControlName must be used with a parent formGroup directive。

这里是 <angular-editor> directive with both reactive forms and template driven forms.

的使用方法

app.component.html

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>One</a>
    <ng-template ngbNavContent>
      <form [formGroup]="privacyForm">
        <angular-editor
          id="editor1"
          formControlName="text"
          [config]="editorConfig"
        ></angular-editor>
        <br />
      </form>
    </ng-template>
  </li>
  <li [ngbNavItem]="2">
    <a ngbNavLink>Two</a>
    <ng-template ngbNavContent>
      <form>
        <angular-editor
          id="editor2"
          [(ngModel)]="terms"
          name="terms"
          [config]="editorConfig"
        ></angular-editor>
      </form>
    </ng-template>
  </li>
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public active = 1;
  public editorConfig: AngularEditorConfig = ...

  public readonly privacyForm: FormGroup;

  public terms = '';

  constructor(private fb: FormBuilder) {
    this.privacyForm = this.fb.group({
      text: new FormControl(''),
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgbModule,
    HttpClientModule,
    AngularEditorModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

我们使用 FormBuilder 创建表单控件。

在选项卡 1 中，我们将 FormGroup 指令附加到 <form> 元素。 FormControlName 指令绑定到 text FormControl.

在选项卡 2 中，我们使用 ngModel directive 创建双向数据绑定。

选择不同的选项卡不会更新内容 | Angular

Selecting a different tab doesn't update the content | Angular

ng-bootstrap

angular

bootstrap-5