ERROR 错误：mat-form-field 必须包含 MatFormFieldControl。下拉列表验证答案

【问题标题】：ERROR Error: mat-form-field must contain a MatFormFieldControl. validation on dropdownlistERROR 错误：mat-form-field 必须包含 MatFormFieldControl。下拉列表验证
【发布时间】：2020-02-25 12:40:20
【问题描述】：

我有一个 Angular 应用程序，我正在使用 Angular 材质

当然，我在 Google 上搜索了很多关于此错误消息的信息。但没有找到任何适合我的具体问题的答案。

所以我有一个带有一些下拉列表和一些单选按钮的 from。每个单选按钮选项都有一些特定的输入字段。例如注册单选按钮有一个下拉列表和一个日期选择器。但例如单选选项 Inlog 只有一个 Datepicker。这是我的表格的一部分：

<form class="from-horizontal" #form="ngForm" [formGroup]="filterSection" (ngSubmit)="closeSearch(form)">
  <div class="filter-plus mat-elevation-z8" [ngClass]="{ expanded: searchExpanded }">
    <div class="filter-plus-search-fields">
      <div class="search-types">
        <div>
          <mat-radio-group>
            <mat-radio-button
              *ngFor="let option of this.filterListData.searchOptions; let i = index"
              [value]="i"
              [checked]="i === 0"
              [(value)]="option"
              (change)="setSelectedSearchOptions(option.label)"
            >
              {{ option.label }}
            </mat-radio-button>
          </mat-radio-group>
        </div>
      </div>

      <div formGroupName="groupOne">
        <mat-form-field>
          <div class="search-selects">
            <div class="search-select searchstatus" *ngIf="!selectedSearch || hasStatusOptions(selectedSearch)">
              <mat-select placeholder="Status" name="status" formControlName="selectedValue" required>
                <mat-option value="">--Selecteer een status--</mat-option>
                <mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
                  {{ option.status }}
                </mat-option>
              </mat-select>
            </div>
          </div>
        </mat-form-field>
      </div>

</form>

所以报错：

ExtendedSearchComponent.html:20 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.es5.js:116)
    at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:703)
    at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentChecked (form-field.es5.js:478)
    at callProviderLifecycles (core.js:18933)
    at callElementProvidersLifecycles (core.js:18911)
    at callLifecycleHooksChildrenFirst (core.js:18901)
    at checkAndUpdateView (core.js:19832)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)

仅在我单击没有 selectedValue 下拉列表的单选按钮时发生。

所以我的问题是：我必须解决什么错误才能消失？

谢谢

【问题讨论】：

标签： javascript angular validation angular-material

【解决方案1】：

一个 MatFormField 必须包含一个 FormControl。在您的情况下，您的控件中有一个 ngIf ，这意味着您的控件仅在您的条件匹配时才存在。将 ngIf 移动到 mat-form-field 标记中，您的错误应该得到修复。

【讨论】：