form.component.html 1.8 KB
Newer Older
liujiaxin's avatar
1  
liujiaxin committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<form nz-form style="width:100%">
  <nz-form-item
    style="width: 25%;float: left;padding: 0 .5rem"
    *ngFor="let control of cardsArray;let i = index">
    <nz-form-control [nzXs]="24" [nzSm]="24" [nzOffset]="0">
      <div nz-col class="gutter-row" [nzSpan]="24">
        <app-upload-image-with-preview
          [picUrl]="control.pic_id ? control.pic_id : null"
          (imageUploaded)="onImageUploadSuccess(control, $event)"
        ></app-upload-image-with-preview>
        <i class="anticon anticon-close dynamic-delete-button"
           (click)="removeCard(control, $event, i)"
           style="position: absolute;right: .5rem;top: .5rem;"></i>
      </div>
      <!--<div *ngIf="cardsArray.length>1" style="position: absolute;right: .5rem;top: .5rem;">-->
      <!--<i class="anticon anticon-close dynamic-delete-button"-->
      <!--(click)="removeCard(control, $event, i)"></i>-->
      <!--</div>-->
      <input nz-input placeholder="word" class="card-word"
             (blur)="addCardWord(control, $event, i)"
             [value]="control.word"
             nzSize="large">
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="margin-top: 1rem;clear: both">
    <nz-form-control
      [nzSpan]="24"
      nzValidateStatus="error"
      [ngStyle]="{'visibility': hasError ? 'visible' : 'hidden'}"
      [nzXs]="{span:24,offset:0}"
      [nzSm]="{span:20,offset:4}">
      <nz-form-explain>image and word can not be empty</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="margin-top: 1rem;clear: both">
    <nz-form-control [nzXs]="{span:24,offset:0}" [nzSm]="{span:20,offset:4}">
      <button nz-button nzType="dashed" style="width:60%" (click)="addCard($event)">
        <i class="anticon anticon-plus"></i> Add Card</button>
    </nz-form-control>
  </nz-form-item>
</form>