Skip to main content
Building Reactive Forms with ng-zorro in Angular

Basic Usage

  1. Page Structure
<form nz-form [formGroup]="validateForm">
  <!-- Basic Input -->
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>Indicator Name</nz-form-label>
    <nz-form-control [nzSpan]="20" nzErrorTip="Please enter the indicator name!">
      <input formControlName="name" nz-input />
    </nz-form-control>
  </nz-form-item>

  <!-- One Row, Two Items -->
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>Indicator Code</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please enter the indicator code!">
      <input formControlName="code" nz-input />
    </nz-form-control>

    <nz-form-label [nzSpan]="4" nzRequired>Data Source</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please select a data source!">
      <nz-select formControlName="datasourceType">
        <nz-option nzLabel="Attribute Data" [nzValue]="'Attribute Data'"></nz-option>
        <nz-option nzLabel="Spatial Data" [nzValue]="'Spatial Data'"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4"> Indicator Description</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <textarea nz-input formControlName="remark" rows="8"></textarea>
    </nz-form-control>
  </nz-form-item>
</form>
阿琛2023/5/26About 1 minAngularangular
Summary of Issues Using HttpClient in Angular

Regarding the blob Return Type

Handling situations when a file download is required, the return type is set to Blob, but a backend error occurs and JSON type data is returned

this.http
  .post(
    `/index/v2/downloadIndexValTemplate`,
    {
      ...this.condition,
    },
    { responseType: "blob" }
  )
  .subscribe((res) => {
    if (res.type == "application/vnd.ms-excel") {
      const a = document.createElement("a");
      a.href = URL.createObjectURL(res);
      a.download = "file.xlsx";
      a.click();
    } else {
      const reader = new FileReader();
      reader.readAsText(res);
      reader.onloadend = () => {
        const { reason } = JSON.parse(reader.result + "");
        this.message.error(reason);
      };
    }
  });
阿琛2023/5/26Less than 1 minuteAngularangular
Using Http Interceptors in Angular
  1. Create a new interceptor service HttpInterceptorService
@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  constructor() {}
}
阿琛2023/4/19Less than 1 minuteAngularangular