带有文本字段的多个复选框

Posted 2023-03-13

【中文标题】带有文本字段的多个复选框

【英文标题】：multiple checkboxes with textfield

【发布时间】：2022-01-09 07:32:04

【问题描述】：

我想在下面屏幕显示的复选框中添加文本字段，我们如何在没有标签的复选框旁边显示一个文本字段？在下面的屏幕截图中相同，因为复选框来自循环，如果选中没有标签的复选框，我只想显示文本字段

感谢您的任何想法。

#示例

#html代码

 <div class="deal-disposition-row"></div>     
        <div class="pharmacy-checkbox">
        <mat-checkbox
         color="primary"
         style="margin-left:10px;"
         name="isAnyContingencies"
         [(ngModel)]="dealDispositionFormFields.isAnyContingencies"
          >
         <div class="deal-text-label">
          Any Contingencies?
        </div>
        </mat-checkbox>
        </div>
        <span>
          <ul>
            <li *ngFor="let contigency of contingencies">
              <mat-checkbox 
              class="checkbox-margin"
              color="primary"
              (change)="changeCurrentContingencies($event,contigency)"
              >
              <mat-form-field appearance="fill"  *ngIf="!contigency.text; else text" matInput>
                <mat-label>Other Contingencies</mat-label>
                <input 
                  name = "buyerProposedPlans"
                  matInput
                  [(ngModel)]="dealDispositionFormFields.buyerProposedPlans"
                  >
                  <span matPrefix *ngIf="dealDispositionFormFields.salePrice">$</span>
              </mat-form-field>
              <ng-template #text>
              contigency.text
              </ng-template>
              </mat-checkbox>
            </li>
          </ul>
        </span>
    </div>

#ts 代码

export class DealIdleDispositionComponent implements OnInit 
  contingencies = [
    id: 1, text: 'Financing Contigency',
    id: 2, text: 'Site Approval Contigency',
    id: 3, text: 'Permit Approval Contingency',
    id: 4, text: 'Tenant Approval Contingency',
    id: 5, text: '',
  ]

   ......

【参考方案1】：

使用*ngIf 和ng-template 在文本为空时有条件地显示输入文本。将以下代码放入您的 li 元素中。

<input *ngIf="!contigency.text; else text" matInput>
    <ng-template #text>
    contigency.text
    </ng-template>