web-dev-qa-db-ja.com

Angular mat-checkboxがインポートされるときの素材エラー

Angular Material、いくつかの解決策を試しましたが、どれも機能しません。これが私がやろうとしていることです：

私はAngular Reactive Formsのマテリアルを使用してregisterフォームを作成していますが、mat-checkboxコンポーネント。これは私が得るerrorです：

エラーエラー：mat-form-fieldにはMatFormFieldControlが含まれている必要があります。

そして、これは私のコードです：

HTML：

<mat-form-field>
   <mat-checkbox formControlName="check">
      Check me!
   </mat-checkbox>
</mat-form-field>

コンポーネント：

this.registerForm = this.formBuilder.group({
    name: ['', Validators.required ],
    email: ['', Validators.required],
    check: ['', Validators.required ]
});

モジュール：

import { ReactiveFormsModule } from '@angular/forms';
import { RegisterFormComponent } from './register-form.component';
import { MatCheckboxModule } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
 imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatCheckboxModule,
    BrowserAnimationsModule
 ],
 declarations: [
    RegisterFormComponent
 ]
})

export class RegisterFormModule { }

モジュールをインポートして、Angular Materialは正常に動作し、フォームコントロール名を実装しましたが、同じerrorを取得しました。mat-checkbox in myhtmlmat-form-fieldコンテナなしで、エラーなしで完全に動作しますが、フォームフィールドを使用する必要があります。検証メッセージを表示するためにいくつかのmat-errorコンポーネントを追加したい。

誰かが私が欠けているものを知っていますか？

angularangular-materialangular-reactive-forms
15
Daniela Cortes

このエラーは、フォームフィールドがその内部で互換性のあるマテリアル入力を見つけることができないことを意味します。

使ってはいけません <mat-checkbox>内部<mat-form-field>。

以下のAngular材料コンポーネントは、<mat-form-field>：

  • <input matInput>＆<textarea matInput>

  • <mat-select>

  • <mat-chip-list>

ソース： 公式ドキュメント

20
kvetis

その場合、angularマテリアルサイトが、formControlNameで使用されているmat-radio-groupと同じリンクでこの例を示しています。

<form class="example-container" [formGroup]="options">
    <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
    <div>
      <label>Float label: </label>`enter code here`
      <mat-radio-group formControlName="floatLabel">
        <mat-radio-button value="auto">Auto</mat-radio-button>
        <mat-radio-button value="always">Always</mat-radio-button>
        <mat-radio-button value="never">Never</mat-radio-button>
      </mat-radio-group>
    </div>
  </form>
0
Learning