Ошибка: mat-form-field, mat-selection-list должен содержать MatFormFieldControl - PullRequest
Новая
       32

Ошибка: mat-form-field, mat-selection-list должен содержать MatFormFieldControl

0 голосов
/ 30 января 2019

Я пытаюсь добавить флажок и прикрепить к полю формы.Я использую угловой 7. Я использую теги mat-form-field, и для этого я получаю сообщение об ошибке

mat-form-field должно содержать MatFormFieldControl.

Я проверил свой код компонента и убедился, что FormControl существует.Хотя это не очень понятно, но добавьте formControl "mat-selection-list" 

//DECLARE CONTROL
    preexistingControl = new FormControl('',[Validators.required]);
// CHECKBOX DATA
    preExistingCondList: PreExistingCond[] = [
            {id:'0' ,value:'None'},
            {id:'1' ,value:'Arthritis'}, 
            {id:'2' ,value:'Asthma'},];
//ADD TO FormGroup
    preexistingControl:this.preexistingControl,

HTML code 

<mat-form-field>
    <mat-selection-list #preConditions placeholder="PreExisting Conditions" [formControl]="preexistingControl">
        <mat-list-option *ngFor="let preExistingCond of preExistingCondList">
                        {{preExistingCond.value}}
        </mat-list-option>
    </mat-selection-list>
</mat-form-field>

Выдает следующую ошибку: 

ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.es5.js:119)
    at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:764)
    at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentInit (form-field.es5.js:453)
    at callProviderLifecycles (core.js:22311)
    at callElementProvidersLifecycles (core.js:22292)
    at callLifecycleHooksChildrenFirst (core.js:22282)
    at checkAndUpdateView (core.js:23213)
    at callViewAction (core.js:23450)
    at execComponentViewsAction (core.js:23392)
    at checkAndUpdateView (core.js:23215)

Я проверил наличие формы formControl и верный идентификатор ссылки.

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Это можно сделать с помощью небольшой работы, это относится к любым компонентам материала, которые не поддерживаются.Вы можете вкладывать их в поле mat-form-field следующим образом. 

    <mat-form-field [formGroup]="formGroup" class="mat-form-field--no-underline">
        <!-- Important part, input with matInput -->
        <input matInput style="display: none!important">
        <mat-selection-list #preConditions [formControl]="preexistingControl" [(ngModel)]="controlAnswer.value">
            <mat-list-option *ngFor="let preExistingCond of preExistingCondList">
                {{preExistingCond.value}}
            </mat-list-option>
        </mat-selection-list>
     </mat-form-field>

И тогда вам понадобится следующий CSS 

  .mat-form-field--no-underline .mat-form-field-underline {
     background-color: transparent !important;
  }

Если стиль не применяется, вы можете использовать ngdeep дляприменить это

0 голосов
/ 30 января 2019

Согласно документации по адресу: https://material.angular.io/components/form-field/overview

Следующие компоненты углового материала предназначены для работы внутри 

<mat-form-field>
<input matNativeControl> & <textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

<mat-selection-list> is not supported for now.
...