Question

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

当然，我在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下拉列表的单选按钮时出现。

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

谢谢

Answer 1

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

错误错误：mat-form-field必须包含一个MatFormFieldControl。在下拉列表中进行验证

1 个答案: