Ошибка: поле mat-form-field должно содержать MatFormFieldControl. проверка в выпадающем списке

Question

У меня есть угловое приложение, и я использую Angular Material

Конечно, я много гуглил об этом сообщении об ошибке. Но я не нашел подходящего ответа на мою конкретную проблему.

Итак, у меня есть несколько выпадающих списков и несколько переключателей. и каждая опция переключателя имеет определенные поля ввода. Например, кнопка регистрации имеет выпадающий список и указатель даты. Но, например, опция радио 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, и ваша ошибка должна быть исправлена.