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

【问题标题】：How to set a variable at [formControl] in Angular 5?如何在 Angular 5 中的 [formControl] 处设置变量？
【发布时间】：2018-04-20 06:21:37
【问题描述】：

我的界面是这样的

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

我用它来创建如下所示的 html（过滤器表单）

<div [ngClass]="(filter.cssClass || 'col-md-4') + 'mt-2 pt-1'">
                  <div class="filter-key-label">
                      {{filter.columnTitle}}
                  </div>
                  <div class="filter-form-control d-flex flex-wrap justify-content-left">
                    <mat-form-field class="full-width">
                      <input type="text" matInput [formControl]="filter.formControl" [matAutocomplete]="auto" (change)="handleEmptyInput($event, filter.key)">
                        <mat-autocomplete #auto="matAutocomplete">
                          <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key, filter.formControl) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                            {{ option }}
                          </mat-option>
                        </mat-autocomplete>
                      </mat-form-field>
                  </div>

现在你可以看到，我正在尝试从过滤器变量中引入值（看看我是如何传递filter.key）

问题是，我无法将变量值传递给[formControl]，因为它让我感到震惊

TypeError：无法在 setUpControl 的字符串“country”上创建属性“validator”

为

  {
    key: 'country',
    mode: FILTER_MODE.AUTOCOMPLETE,
    columnTitle: 'Country',
    compareMethod: COMPARE_METHOD.ONE_TO_ONE,
    formControl: 'countryForm',
    cssClass: ''
  },

我在这里做错了什么？我想用同一个html生成不同的表单，不同的表单控件名称。

更新

即使像这样在我的 component.ts 文件中添加基于直接字符串的变量后，这也不起作用

countryForm: FormControl = new FormControl();

【问题讨论】：

你后端？？即ts文件
我的问题的更新部分是你现在唯一需要的部分

标签： javascript angular-material angular5 input-field angularjs-ng-form

【解决方案1】：

您正在使用[formControl]="filter.formControl" 将字符串对象传递给formControl 属性：

countryForm: FormControl = new FormControl();

filter = {
    ...
    formControl: 'countryForm',
}

但是你需要传递一个FormControl对象：

countryForm: FormControl = new FormControl();

filter = {
    ...
    formControl: this.countryForm,
}

【讨论】：