角度-如何显示基于多个选择选项的输入字段？

sy523 发表于 Dev

sy523

我希望显示基于多个选择日选项的签入和签出输入字段。例如，选择“星期一”和“星期二”将显示两个“签入”和“签出”输入字段，以便用户填写所选日期的时间范围。

这是我的代码。

<div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <label>Active Days</label>
            <ng-select [items]="days" name="days"
                       bindLabel="id"
                       autofocus
                       loadingText="Loading ..."
                       [multiple]=true
                       bindValue="id"
                       placeholder="Select Active Days"
                       [(ngModel)]="attendanceProfile.days">
            </ng-select>
          </div>

        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Check In Time</label>
            <input autocomplete="off" atp-time-picker type="text" class="form-control" 
                   name="checkInTime"
                   id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
                   placeholder="Select CheckIn Time"/>  
          </div>
        </div>

        <div class="col-md-6">
          <div class="form-group">
            <label>Check Out Time</label>
            <input autocomplete="off" atp-time-picker type="text" class="form-control" 
                   name="checkOutTime"
                   id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
                   placeholder="Select CheckOut Time"/>
          </div>
        </div>
      </div>

乌索尔

如果我真的了解，则仅在选择某天后才需要显示输入字段，为此，您只需要使用ngIf条件，例如：

*ngIf="attendanceProfile?.days?.length"

范例：

<div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label>Active Days</label>
        <ng-select [items]="days" name="days"
                   bindLabel="id"
                   autofocus
                   loadingText="Loading ..."
                   [multiple]=true
                   bindValue="id"
                   placeholder="Select Active Days"
                   [(ngModel)]="attendanceProfile.days">
        </ng-select>
      </div>

    </div>
  </div>

  <div *ngIf="attendanceProfile?.days?.length" class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>Check In Time</label>
        <input autocomplete="off" atp-time-picker type="text" class="form-control" 
               name="checkInTime"
               id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
               placeholder="Select CheckIn Time"/>  
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label>Check Out Time</label>
        <input autocomplete="off" atp-time-picker type="text" class="form-control" 
               name="checkOutTime"
               id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
               placeholder="Select CheckOut Time"/>
      </div>
    </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。