javascript - 错误 下拉列表验证错误 : mat-form-field must contain a MatFormFieldControl.

Question

我有一个 Angular 应用程序，并且我正在使用 Angular Material

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

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

<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 下拉列表的单选按钮时才会发生。

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

谢谢

Answer 1

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