我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:
字段:
<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
你需要将MatInputModule导入到app.module.ts文件中
import {MatInputModule} from '@angular/material';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustomerPage } from './components/customer/customer';
import { CustomerDetailsPage } from "./components/customer-details/customer-details";
import { CustomerManagementPageRoutingModule } from './customer-management-routing.module';
import { MatAutocompleteModule } from '@angular/material/autocomplete'
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule} from '@angular/material';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CustomerManagementPageRoutingModule,
MatAutocompleteModule,
MatInputModule,
ReactiveFormsModule,
MatFormFieldModule
],
不幸的是,我不能只是评论一些已经很好的答案,因为我还没有SO点,然而,有3个关键模块,你需要确保你导入到你的组件的父模块,除了你必须直接导入到你的组件。我想简单地和大家分享一下,并强调一下他们的工作。
MatInputModule
MatFormFieldModule
ReactiveFormsModule
前两个是针对Angular Material的。很多刚接触Angular Material的人会本能地遇到其中一个,但没有意识到构建表单需要两者兼而有之。
那么它们之间有什么区别呢?
MatFormFieldModule包含了Angular Material中所有可用的不同类型的表单字段。这是一个更高级的模块一般的表单字段,而MatInputModule是专门为“输入”字段类型,而不是选择框,单选按钮等。
上面列表中的第三项是Angular的响应式表单模块。响应式表单模块负责大量Angular的底层工作。如果你打算使用Angular,我强烈建议你花点时间阅读Angular Docs。他们有你所有的答案。构建应用程序很少不涉及表单,而且通常情况下,应用程序将涉及响应式表单。因此,请花点时间阅读这两页。
Angular Docs:响应式表单
Angular Docs:响应式表单模块
第一个文档“响应式表单”将是你入门时最有力的武器,第二个文档将是你进入更高级的Angular响应式表单应用时最有力的武器。
请记住,这些需要直接导入到组件的模块中,而不是导入到正在使用它们的组件中。如果我没记错的话,在Angular 2中,我们在主app模块中导入了整个Angular Material模块集,然后直接在每个组件中导入了我们需要的内容。目前的方法在我看来要高效得多,因为如果我们只使用其中的几个模块,我们就可以保证导入整个Angular Material模块集。
我希望这篇文章能让你对Angular Material的构建形式有更多的了解。
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
不要忘记在前面添加< table> </table>
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Helium" #input>
</mat-form-field>
不要忘记在最后添加< table> </table>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{input.value}}"
</td>
</tr>
我也有这个问题,我有<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>