对表单的抽象【表单输入】【表单回调函数处理】

最新推荐文章于 2022-01-04 15:16:06 发布

改个名字888777

最新推荐文章于 2022-01-04 15:16:06 发布

阅读量362

点赞数

分类专栏： angular ts

本文链接：https://blog.csdn.net/Lakeson/article/details/104795766

版权

angular 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

本文分2部分，分别为：表单输入的抽象，表单更新的回调函数的抽象。

1. 表单输入 - bowtieOptions

1. 表单输入 - bowtieOptions

1. 入门版

    <nz-radio-group [(ngModel)]="ffsRadioValue" (ngModelChange)="updateAir()">
      <label nz-radio nzValue="No">No</label>
      <label nz-radio nzValue="X">X</label>
    </nz-radio-group>

**2. 加上*ngFor**

    <nz-radio-group
      [(ngModel)]="selectedValue"
      (ngModelChange)="updateAir(selectedValue)"
      *ngFor="let item of bowtieRadioValue"
    >
      <label nz-radio nzValue="{{ item.value }}">{{ item.shown }}</label>
    </nz-radio-group>

  bowtieRadioValue = [
    { value: 'small', shown: 'small' },
    { value: 'middle', shown: 'middle' },
    { value: 'large', shown: 'large' }
  ];

  updateAir(x: any) {
    console.log(x);
  }

3. 开始抽象

export interface SelectOption<T> {
  value: T;
  shown: string;
}

export function toOptions<T>(
  values: ReadonlyArray<T>,
  toShown?: (x: T) => string
): SelectOption<T>[] {
  return values.map(value =>
    toShown
      ? {
          value,
          shown: toShown(value)
        }
      : {
          value,
          shown: value.toString()
        }
  );
}

export function toOptionsFromEnum<T>(
  e: any,
  type: 'number' | 'string',
  toShown?: (x: T) => string
): SelectOption<T>[] {
  const result = Object.values(e).filter(x => typeof x === type) as T[];
  return toOptions(result, toShown);
}

  bowtieOptions = toOptionsFromEnum<BowtieFilterSize>(
    BowtieFilterSize,
    'string'
  );

    bowtie
    <nz-radio-group
      [(ngModel)]="bowtieSelected"
      (ngModelChange)="updateAir('bowtie', [bowtieSelected])"
      *ngFor="let item of bowtieOptions"
    >
      <label nz-radio nzValue="{{ item.value }}">{{ item.shown }}</label>
    </nz-radio-group>

重点是这个bowtieOptions。这样对传入的数组进行抽象，可以约束传入html的数据以及选择表单的回调函数的数据。

2. 表单回调函数

  updateAir<K extends keyof calibration.CTCalibrationParameter.Air>(
    key: K,
    value: calibration.CTCalibrationParameter.Air[K]
  ) {
    this.air[key] = value;
  }