下面的代码显示了一个允许选择美国州的自动填充表单控件 .
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
但是,如果在我的应用程序中我有许多需要这种类型输入的位置,那么将它转换为一个组件(指令?)是有意义的,其中所有样板都不需要重复 . 但是,我仍然希望能够在模板驱动或模型驱动的表单中使用它,并允许容器组件改变占位符,验证等 .
实现这一目标的简单而有力的方法是什么?
我尝试过为Angular推荐的一般方法,但它们没有考虑Angular Material的各种要求 . 例如 . 需要实现MatFormFieldControl . Angular Material提供的指导更多地是使用原始元素创建新的表单控件,而不是利用/包装现有的Angular Material表单控件 .
目标是能够以这样的形式做这样的事情:
<mat-form-field>
<lookup-state placeholder="State of Residence" required="true" formControlName="resState">
</lookup-state>
</mat-form-field>
2 回答
我将使用Angular Material粘贴我的组件示例 . 我创建了一个自定义输入组件(两种情况:简单输入或自动完成):
这是我的 Input.component.html
这是我的 Input.component.ts
现在我将举一个使用它们的例子:
简单 input case
autocomplete input case
希望会有所帮助
想要为自动完成创建包装器组件时遇到了同样的问题 . 下面是我的实现,它以反应式和模板驱动的形式工作 . 为了实现这一目标,您需要实现
ControlValueAccessor
. 如果您还要进行某些验证,则还可以实现Validator
接口 .即使表单控件实际上无效,我确实遇到了
mat-form-field
未被标记为无效的问题 . This评论问题“如果FormField被自定义组件包装,则不应用样式”和this相关的plunker帮助我解决了这个问题 .autocomplete.component.html:
autocomplete.component.ts: