如何在Angular 5的[formControl]中设置变量？

TypeScript 接口定义 #

首先是用于规范筛选参数的IFilterParams接口，它定义了筛选项的核心配置字段，包含必填项和可选扩展项：

export interface IFilterParams {
  columnTitle: string;
  key: string;
  mode: FILTER_MODE;
  compareMethod: COMPARE_METHOD;
  keyToCheck?: string;
  sliderKeys?: string[];
  startingValue?: number;
  placeHolder?: string;
  cssClass?: string;
  formControl?: string;
}

• columnTitle: 筛选项的显示标题
• key: 筛选对应的数据源字段键
• mode: 筛选控件的类型（比如输入框、下拉选、滑块等，对应FILTER_MODE枚举）
• compareMethod: 筛选的比较逻辑（比如等于、包含、大于等，对应COMPARE_METHOD枚举）
• 可选字段：keyToCheck用于指定额外校验字段，sliderKeys为滑块控件提供关联键，startingValue设置控件初始值，placeHolder定义输入占位符，cssClass自定义布局样式，formControl绑定表单控件名

Angular 模板代码 #

基于上述接口，这里是动态生成筛选表单的HTML模板片段，通过Angular指令实现控件的条件渲染和属性绑定：

<div [ngClass]="(filter.cssClass || 'col-md-4') + 'mt-2 pt-1'">
  <div class="filter-key-label">
    {{filter.columnTitle}}
  </div>
  <div class="filter-form-control">
    <!-- 文本输入框模式 -->
    <input *ngIf="filter.mode === FILTER_MODE.INPUT" 
           type="text" 
           [placeholder]="filter.placeHolder || '输入筛选值'"
           [formControlName]="filter.formControl">
    
    <!-- 下拉选择框模式 -->
    <select *ngIf="filter.mode === FILTER_MODE.SELECT"
            [formControlName]="filter.formControl">
      <!-- 这里可以根据业务逻辑渲染下拉选项，比如遍历数据源 -->
      <option *ngFor="let option of filterOptions" [value]="option.key">{{option.label}}</option>
    </select>
    
    <!-- 滑块控件模式 -->
    <div *ngIf="filter.mode === FILTER_MODE.SLIDER"
         class="slider-container">
      <input type="range" 
             [min]="filter.startingValue || 0"
             [max]="100" <!-- 可根据业务调整最大值 -->
             [formControlName]="filter.formControl">
      <span class="slider-value">{{filter.formControl.value}}</span>
    </div>
  </div>
</div>

这段模板的核心逻辑：

1. 使用ngClass动态设置布局类，默认使用col-md-4，同时支持通过cssClass自定义样式
2. 根据filter.mode的值条件渲染不同的筛选控件，适配多种筛选场景
3. 绑定了placeholder、formControlName等属性，确保表单控件与接口配置的联动

内容的提问来源于stack exchange，提问作者Aakash Verma