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

迈不过友情╰ 2023-07-13 08:28 15阅读 0赞

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

**目录**

1. 表单输入 - bowtieOptions

1. 入门版

2. 加上\*ngFor

3. 开始抽象

2. 表单回调函数

--------------------

## 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;
      }