nz-upload

<nz-form-item>
    <nz-form-label nzXs="4" nzSm="4" nzRequired>标准图标</nz-form-label>
    <nz-form-control nzXs="8" nzSm="8" nzMd="16">
      <nz-upload nzAction="url" [nzShowUploadList]="false" [nzCustomRequest]="customReq"
                 [nzBeforeUpload]="beforeUpload">
        <ng-container *ngIf="!avatarUrl">
          <div style="border: 1px solid #D3D3D3;">
            <div style="padding: 5px;">
              <i nz-icon nzType="upload"></i><span style="margin-left: 5px;">Upload</span>
            </div>
          </div>
        </ng-container>
        <img *ngIf="avatarUrl" [src]="avatarUrl" style="height: 120px;width: 120px;"/>
      </nz-upload>
    </nz-form-control>
  </nz-form-item>

 beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
    return new Observable((observer: Observer<boolean>) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.msg.error('You can only upload JPG file!');
        observer.complete();
        return;
      }
      const isLt2M = file.size! / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.msg.error('Image must smaller than 2MB!');
        observer.complete();
        return;
      }
      observer.next(isJpgOrPng && isLt2M);
      observer.complete();
    });
  };

  avatarUrl= '';
  customReq = (item: NzUploadXHRArgs) => {
    const formData = new FormData();
    formData.append('file', item.file as any);
    return this.http.post("url前缀部分" + item.action, formData).subscribe(res => {
      this.avatarUrl = res.data
      this.cdr.detectChanges();
      this.form.patchValue({'checkIcon': res.data}) ;
    });
  };

import {NzModalRef, NzUploadFile} from "ng-zorro-antd";

import {Observable, Observer} from "rxjs";

import {NzMessageService} from "ng-zorro-antd/message";

import {NzUploadXHRArgs, UploadFile} from "ng-zorro-antd/upload";

 constructor(

    private fb: FormBuilder,

    public modal: NzModalRef,

    private cdr: ChangeDetectorRef,

    private common: CommonService,

    private http: _HttpClient,

    private modalHelper: ModalHelper,

    public msg: NzMessageService,

  ) 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 TypeScript 编写上述表单时,你可以这样写: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.css'] }) export class SearchFormComponent { q = { ajmc: '', ajbh: '', }; onSubmit() { // 处理表单提交事件 } onReset() { this.q.ajmc = ''; this.q.ajbh = ''; } } ``` 在这个例子中,我们使用了 Angular 框架来构建组件。在组件类中,我们定义了一个 `q` 对象来存储表单中的数据。当提交表单时,我们可以在 `onSubmit` 方法中处理表单提交事件,当重置表单时,我们可以在 `onReset` 方法中将 `q` 对象中的属性值设置为空字符串,从而实现表单重置的功能。 在 HTML 文件中,你可以这样写: ```html <form nz-form [nzLayout]="'inline'" class="search-form" (ngSubmit)="onSubmit()"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>  案件名称</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <nz-form-item> <nz-form-label>案件编号</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'">查询</button> <button nz-button type="button" class="mx-sm" (click)="onReset()">重置</button> </nz-col> </nz-row> </form> ``` 在这个例子中,我们使用 `(ngSubmit)` 指令来监听表单的提交事件,并在事件发生时调用组件类中的 `onSubmit` 方法。在重置按钮中,我们使用 `(click)` 指令来监听按钮的点击事件,并在事件发生时调用组件类中的 `onReset` 方法。注意,重置按钮的类型应该为 `type="button"`,这样可以避免表单的提交事件被触发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值