CODEWITHSUNDEEP
javascriptangularvalidationangular-material
user12296049
user12296049

Reputation:

ERROR Error: mat-form-field must contain a MatFormFieldControl. validation on dropdownlist

I have a angular application and I am using Angular Material

of course I googled a lot about this error message. But didnt find any suitable answare to my specific problem.

So I have a from with some dropdownlists and some radio buttons. and every radio button option has some specific input fields. For example registrations radio button has a dropdownlist and a datepicker. But for example the radio option Inlog has only a Datepicker. This is part of my form:

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

So the error:

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)

occurs only when I click on a radio button that doesn't has the selectedValue dropdownlist.

So my question is: what I have to fix that the error will disappear?

Thank you

Upvotes: 1

Views: 1282

Answers (1)

JuNe
JuNe

Reputation: 1997

A MatFormField must contain a FormControl. In your case you have an ngIf in your control which means your control is only present when your condition matches. Move the ngIf into the mat-form-field tag and your error should be fixed.

Upvotes: 1

Related Questions