angular - 当它的组件被隐藏时，输入值会被清除，但我不想这样做。我该如何解决？

Question

当我切换输入子组件的可见性时，他的值会清除，并且我添加的所有表单组件都会发生这种情况。我该如何解决？

我的输入子组件.html

<mat-form-field>
  <mat-label>{{ title }}</mat-label>
  <input 
    [formControl]="control"
    [readonly]="!isVisible"
    [type]="type"/>
</mat-form-field>

输入.ts

export class InputComponent implements OnInit {
  @Input() title: string;
  @Input() isVisible: boolean;
  @Input() control: FormControl;
  @Input() type: 'text' | 'number';
}

父表单组件

<div 
  [formGroup]="form">
  <app-input
    [control]="form.get('input')"
    [isVisible]="isVisible"
    type="text"
    title="Example title">
  </app-input>
</div>

表单组件.ts

export class IfaceFormComponent implements OnInit {

  @Input() isVisible: boolean;

  form: FormGroup = this.fb.group({
    input: this.fb.control('')
  });

  constructor(
    private fb: FormBuilder,
  ) { }

}

还有我的卡片组件，我在其中导入表单组件

<mat-card>
   <div>
      <button (click)="toggleVisibiltyMode()">
        <mat-icon>mode_edit</mat-icon>
      </button>
  </div>
  <mat-card-content
    (click)="toggleViewMode()">
    <app-form *ngIf="!isCompactView" [isVisible]="isVisible"></app-form>
  </mat-card-content>
</mat-card>

卡片组件.ts

export class WanCardComponent implements OnInit {

  @Input() index: number;

  isVisible = false;
  isCompactView = false;

  toggleViewMode(): void {
    if (!this.isVisible) {
      this.isCompactView = !this.isCompactView;
    }
  }

  toggleVisibilityMode(): void {
    this.isVisible = !this.isVisible;
    if (this.isCompactView) {
      this.isCompactView = !this.isCompactView;
    }
  }
}

标签： angularangular-material