我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:
字段:
<mat-form-field>
<ng-content></ng-content>
<mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
<mat-hint align="end">{{message.value.length}} / 256</mat-hint>
<mat-error>This field is required</mat-error>
</mat-form-field>
文本框:
<field hint="hint">
<input matInput
[placeholder]="placeholder"
[value]="value"
(change)="onChange($event)"
(keydown)="onKeydown($event)"
(keyup)="onKeyup($event)"
(keypress)="onKeypress($event)">
</field>
用法:
<textbox value="test" hint="my hint"></textbox>
结果大致如下:
<textbox placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
<field>
<mat-form-field class="mat-input-container mat-form-field">
<div class="mat-input-wrapper mat-form-field-wrapper">
<div class="mat-input-flex mat-form-field-flex">
<div class="mat-input-infix mat-form-field-infix">
<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
<span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
</div>
</div>
<div class="mat-input-underline mat-form-field-underline">
<span class="mat-input-ripple mat-form-field-ripple"></span>
</div>
<div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
</div>
</mat-form-field>
</field>
</textbox>
但是我在控制台得到“mat-form-field必须包含MatFormFieldControl”。我猜这与mat-form-field不直接包含matinput字段有关。但它包含了它,只是在ng-content投影中。
以下是闪电战:
https://stackblitz.com/edit/angular-xpvwzf
我也有这个问题,我有<mat-select>元素在我的模板,当我导入MatSelectModule到模块,它的工作,它没有意义,但我仍然希望它能帮助你。
import { MatSelectModule } from '@angular/material/select';
imports: [
BrowserModule,
BrowserAnimationsModule,
MatSidenavModule,
MatButtonModule,
MatIconModule,
MatToolbarModule,
MatFormFieldModule,
MatProgressSpinnerModule,
MatInputModule,
MatCardModule,
MatSelectModule
],
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>
如果上面所有主要的代码结构/配置答案都不能解决您的问题,那么还有一件事需要检查:确保您没有以某种方式使<input>标记失效。
例如,我收到了相同的mat-form-field必须包含一个MatFormFieldControl错误消息,在意外地将一个必需的属性放在自关闭斜杠/之后,这有效地使我的<input/>无效。换句话说,我这样做了(参见输入标签属性的末尾):
错误的:
<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>
正确的:
<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>
如果你犯了这个错误或其他使你的<input>无效的错误,那么你可以得到mat-form-field必须包含一个MatFormFieldControl错误。不管怎样,这只是调试时要注意的另一件事。
在我的例子中,它是TranslocoService服务,它可能会打乱init之后的初始化。
我的代码是这样的:
<mat-form-field
class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
<mat-icon
class="icon-size-5"
matPrefix
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<input
*transloco="let t"
(keyup.enter)="searchByCustomerName()"
matInput
[formControl]="searchInputControl"
[autocomplete]="'off'"
placeholder="{{t('customer.management.customers.search.customer.name')}}">
</mat-form-field>
我把它改成了这样。
<mat-form-field
class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
<mat-icon
class="icon-size-5"
matPrefix
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<input
(keyup.enter)="searchByCustomerName()"
matInput
[formControl]="searchInputControl"
[autocomplete]="'off'"
[placeholder]="searchBarPlaceHolder">
</mat-form-field>
占位符值来自组件中的一个字段。
经过这种修改,错误就消失了。如果你正在使用transloco,你可以试试这个。