ng-zorro

loading nz-spin

<nz-spin  [nzSimple] = 'loading' *ngIf="loading" class="loading"></nz-spin>

nz-form 表单验证

<nz-modal
  [(nzVisible)]="isVisibleOSToken"
  [nzTitle]="'Token Configuration - HYOS' | translate"
  nzMaskClosable="false"
  [nzOkText]="'Confirm' | translate"
  [nzCancelText]="'Cancel' | translate"
  (nzOnCancel)="handleCancelOSToken()"
  (nzOnOk)="confirmOSToken()"
  [nzOkDisabled]="disabled"
  [nzWidth]="'700px'"
>
  <div class="data-token-setting">
    <form [formGroup]="groupForm" style="width: 90%" >
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="tokenAddress"
          >{{ "Token address" | translate }}</nz-form-label
        >
        <nz-form-control
          [nzErrorTip]="'Please enter the token address'|translate"
        >
          <input
            formControlName="tokenAddress"
            nz-input
            [disabled]="disabled"
            [placeholder]="'Please enter the token address'|translate"
            style="width: 70%"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
		......
      </nz-form-item>
    </form>
</nz-modal>

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
@Component({
    selector: 'xx',
    templateUrl: 'xx',
    styleUrls: ['xx'],
})
export class DataTokenSettingComponent implements OnInit {
    public isVisibleOSToken = false
	// FormGroup
    public groupForm: FormGroup
    // osToken获取的数据集
    public authList = []
    public authConfig = {
        header: [
            {
                name: '解析字段', // 解析字段
                field: 'name',
                width: '200px',
                isRequired: true,
            },
            {
                name: '值',
                field: 'value',
                width: '400px',
                isRequired: true,
            },
        ],
    }

    @Output() tokenEmit = new EventEmitter()
    constructor(
        private formBuilder: FormBuilder,
        private dataSourceService: DataSourceService,
        private messageService: ShowMessageService,
    ) {
		// 配置字段
        this.groupForm = this.formBuilder.group({
			//如果需要设置是否可编辑
			//  tokenAddress: [{ value: null, disabled: true }, [Validators.required]], // token地址
            tokenAddress: [null, [Validators.required]], // token地址
            encryptedAddress: [null, [Validators.required]], // 加密地址
        })
        
        // 设置
        this.groupForm.patchValue({
            tokenAddress: "xxx",
            encryptedAddress: 'xxx'
        })
    }
    ngOnInit(): void {

    }
    handleCancelOSToken() {
        this.resetOsToken()
    }
    confirmOSToken() {
		...
        this.resetOsToken()
    }
    resetOsToken() {
        this.isVisibleOSToken = false
        this.authList = []
        this.osSelectArr = []
		// 清空
        this.groupForm.reset()
    }
    getDataOsToken() {
		// 校验
        Object.keys(this.groupForm.controls).forEach((key: string) => {
            this.groupForm.controls[key].markAsDirty()
            this.groupForm.controls[key].updateValueAndValidity()
        })
        if (this.groupForm.invalid) return
		// 读取值
		this.account = this.groupFormLogin.value.account
		this.password = this.groupFormLogin.value.password
    }
}

当this.formBuilder.group中某些参数设置为disabled后，patchValue之后展开实例对象的value，那些设置为disabled的属性无法获取

this.addApiDataSourceForm = this.formBuilder.group({            
	frequency: [''], // 刷新周期
	methodType: ['1', [Validators.required]], // 请求方式
	url: [{ value: null, disabled: true }, [Validators.required]], // 请求地址
})
this.addApiDataSourceForm.patchValue({
	dataSourceName: this.editValue.dataSourceName,
	frequency: this.editValue.frequency,
	methodType: this.editValue.userName,
	url: this.editValue.url,
})
//获取不到this.addApiDataSourceForm.value.url的值的

如果某些属性，可能中途修改了是否必填属性

// 获取url字段的AbstractControl  
const urlControl = this.addDatabaseDataSourceForm.get('url');  
  
// 如果urlControl存在，并且它有验证器  
if (urlControl && urlControl.validator) {  
  // 获取当前的验证器数组  
  const validators = urlControl.validator({}).required ? [null] : []; // 如果required，则替换为null，否则保持原样  
  
  // 设置新的验证器数组（不包含Validators.required）  
  urlControl.setValidators(validators);  
  urlControl.updateValueAndValidity(); // 更新控件的值和有效性  
}

nz-table

      <nz-table  
        [nzData]="authList" 
        [disabled]="disabled"
        [nzNoResult]="'No data' | translate" 
        #expandTable 
        [nzShowPagination]="false"
        [nzScroll]="{
            x:500+'px',
            y:300+'px'
          }"
        >
        <thead>
          <tr>
            <th *ngFor="let headItem of authConfig.header" [nzWidth]="headItem.width" >
              <span>{{ headItem.name | translate }}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          
            <ng-container *ngFor="let item of authList">
              <tr>
                <ng-container>
                  <td
                    [nzShowCheckbox]="true"
                    [(nzChecked)]="item.checked"
                    (nzCheckedChange)="checkData(item)"
                    [nzDisabled]="disabled"
                    nzEllipsis
                  >
                    {{ item.name }}
                  </td>
                </ng-container>
                <td 
                nzEllipsis 
                nzwidth="400px"
                >
                  <ng-container>
                    {{ item.value }}
                  </ng-container>
                </td>
              </tr>
            </ng-container>
        </tbody>
      </nz-table>
    </div>

hover样式滞后

在开发中，使用了dropdown时，当hover时，总是发现color颜色滞后，判断了transition发现还是不对，最后发现是之前代码用了 a标签 的缘故，将标签替换掉就好了

  <nz-dropdow-menu #menu2="nzDropdownMenu">
	<ul
	  class="dropdownMenu"
	  nz-menu
	>
	  <li nz-menu-item *appAuthBtu="ActionCode.visionGroupEdit">
		<span (click)="editGroup(subMenu)">{{ "Rename" | translate }}</span>
	  </li>
	  <li nz-menu-item *appAuthBtu="ActionCode.visionGroupDel">
		<!-- <a (click)="deleteGroup(subMenu)">{{ "Delete" | translate }}</a> -->
		<span (click)="deleteGroup(subMenu)">{{ "Delete" | translate }}</span>
	  </li>
	</ul>
  </nz-dropdown-menu>