Angular 如何在可扩展的 ngIf 模板表单中维护 ngModel 字段

Question

我的 Angular 模板表单中有可选字段，允许用户扩展 *ngIf 语句以显示更多表单字段。但是，只要填写了可选字段并再次折叠该字段，这些字段就会从 ngModel 中删除。希望下面显示了足够的细节。

HTML

<form #f="ngForm" (ngSubmit)="submit(f.value)">

 <div class="form-group">
  <label class="textUnderline" for="inputLocation1">Location:</label>
  <input required [(ngModel)]="entry.orgId" name="orgId" maxlength="300" #orgId="ngModel" type="text" 
 class="form-control" id="inputLocation1" >
</div>

  <label class="form-check-label" style="padding-right: 10px;">Exapanded Form Options</label>
  <span style="color: #3f51b5; cursor: pointer; padding-top: 0px; top: 10px; font-size: 30px;" 
  class="glyphicon" 
  [class.glyphicon-triangle-bottom]="isExpanded" 
  [class.glyphicon-triangle-top]="!isExpanded" 
  (click)="toggle()"></span>

<div *ngIf="isExpanded == true">
<div class="form-group">
    <label for="problemSummary" class="followUpResponse">Summary:</label>
    <p-editor [(ngModel)]="entry.problem" maxlength="4000" #problem="ngModel" name="problem"  id="problemSummary"></p-editor>

</div

.ts

 toggle() {
 this.isExpanded = !this.isExpanded;
 }

形成 json 未扩展的 ngModel 字段

{ "orgId": "DENV (DENVER, CO)"}

展开时形成 json ngModel 字段

{ "orgId": "DENV (DENVER, CO)", "problem": "I'm A Problem here" }

我如何（如果可能）在我的表单模型中传递那些额外的表单字段，无论它是展开还是折叠？

感谢您的帮助。

Answer 1

尝试删除 ngIf 并将其替换为 [ngStyle]="!isExpanded && {'display': 'none'}"。显示 none 将使 div 保留在 dom 中（因此保留在表单模型中）。 UI感觉应该和以前一样吧

奇怪的 ngStyle 语法意味着：

if (!isExpanded) {
    style = display: none
}

Angular 如何在可扩展的 ngIf 模板表单中维护 ngModel 字段

Angular how to maintain ngModel fields within an expandable ngIf template form

angular

angular-forms