- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Mat-Autocomplete 上使用 formControlName 时遇到问题。
我不知道为什么,但我的 formControlName 不会发送数据,是我写错了吗?
当我尝试从 HTML 中删除 [formControl] 时,它总是无法过滤。
HTML
<form [formGroup]="form" #legalDataFrm="ngForm" autocomplete="off" fxLayout.gt-sm="column" fxFlex="1 1 auto" novalidate>
<input type="text" placeholder="Pilih Bank"
formControlName="bankName" matInput
[formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)='onChangeBank()'
[displayWith]="displayFn">
<mat-option>Pilih Bank</mat-option>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.bankName}}
</mat-option>
</mat-autocomplete>
</form>
export class FpLegalDataFormComponent implements OnInit, OnDestroy {
form: FormGroup;
myControl = new FormControl();
options: User[];
filteredOptions: Observable<User[]>;
constructor(
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder,
public _validationsService: ValidationsService,
public _bankService: BankService
) {
}
this.form = this.formBuilder.group({
bankName : [bankName, Validators.required]
});
displayFn(user?: User): string | undefined {
return user ? user.bankName : undefined;
}
private _filter(name: string): User[] {
const filterValue = name.toLowerCase();
return this.options.filter(option =>
option.bankName.toLowerCase().indexOf(filterValue) > -1);
}
private initDropdown() {
this._bankService.getBank().then((response) => {
console.log(response.data.bankList)
this.options = response.data.bankList;
console.log(this.options)
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.bankName),
map(name => name ? this._filter(name) : this.options.slice())
);
})
}
最佳答案
首先,初始化表单控件是很好的:
this.form = this.formBuilder.group({
bankName : [bankName, Validators.required]
});
this.form = this.formBuilder.group({
bankName: new FormControl(bankName, Validators.required)
});
<input type="text" placeholder="Pilih Bank"
formControlName="bankName" matInput
[formControl]="myControl" [matAutocomplete]="auto">
<input type="text" placeholder="Pilih Bank" matInput
[formControl]="form.get('bankName')" [matAutocomplete]="auto">
关于angular - Mat-Autocomplete formControlName,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56073570/
我正在尝试让 Ace Editor 支持我自己的查询语言的自动完成功能。 查询本身如下所示 city:newyork color:red color:blue 在上述情况下,我希望用户在输入“c”时可
我有一个 Material-UI 组件,我正在使用它,您可以在其中输入某人的姓名,它将提供一个可供选择的人员列表。这是一个非常标准的用例,但是我需要表单中的所选项目与标签不同。 目前,如果您选择标有
我开始使用 atom IDE 来编写 HTML+ CSS 代码。 autocomplete-atom-api 被激活,但仍然没有代码自动完成,也没有当我按下 ctrl+space 时。 这是我的 ke
我成功地使用了 API,但今天早上遇到错误,文本框中出现“糟糕!出了点问题”,用户无法输入。我发现该问题与 key 相关并已修复,但是,这表明可能会出现一些问题,并且由于此阻塞,用户无法完成。我希望能
我无法弄清楚这两个流行插件中的哪一个在 Sublime 3 环境中的自动完成功能中运行得更好。究竟有什么区别? 此外,我想知道他们是否可以在不搞砸的情况下正常工作。你能帮我解决这个问题吗? 可以找到插
我显然遗漏了一些东西,但是当我尝试将自动完成添加到文本框时,我不断收到此消息:.autocomplete 不是函数 _布局(仅头部): @ViewBag.Title - My ASP.NET
是否有一种标准方法可以使用 ElasticSearch 为小字段(例如地名)实现逐字符输入自动完成。 (在撰写本文时,可以通过搜索进行大量讨论,但似乎没有什么是确定的。(另外,我看到有人谈论 Apac
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 3 年前。
我正在使用 rails3-jquery-autocomplete gem 来自动完成用户名,搜索属性是 lastname 但我想显示全名作为显示值。这是我的 Controller 中的内容 autoc
我有一个 jQuery 自动完成插件,当我复制/粘贴到它时,它不会触发。有什么办法让它工作吗? 最佳答案 $("#ID").bind("paste", function () { setTim
我有 2 个自动完成 UITextField这将在输入文本时触发表格 View 。其中一个我正在使用MVPlaceSearchTextField .我使用 this 自定义构建的另一个. 当我输入 t
我在一个页面上有多个自动完成。 当我对所有文本字段使用 jQuery UI AutoComplete 时,它会添加表单的动态选择列表 Entry 1 有一个 CSS 样式,ui-au
我在 Google Places API Web 服务中使用 Place Autocomplete,以下 API 调用工作正常: https://maps.googleapis.com/maps/ap
我已经在 angular 5 项目上安装了primeng。 我正在使用 p-autoComplete 组件,但现在发生此错误。 我应该如何解决这个错误? 这是我的源代码。 Basic 最佳答案 通常
我不断出现这个错误: “无效的 DOM 属性 autocomplete 。您是说 autoComplete 吗?” 当我在 上编译我的 React 项目时谷歌浏览器 . 当我尝试在 上编译代码时火狐
我想创建一个动态自动完成输入,可以使用 metroui 进行更新和它类似 jquery m4q 。基于on its documentation ,我需要在input标签中设置data-autocomp
我有两个 下拉菜单。我想根据第一个下拉列表的选择更新第二个下拉列表的搜索列表。 这是一个准备好的非工作插件:http://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=pr
我们有一个标准的地址表格(街道 1、街道 2、城市、州、邮政编码、国家/地区)。 当我在 Street 1 添加 Google Places Autocomplete API 的代码时,它会在加载页面
我有 md-autocomplete : {{item.name}} :: {{item.type}} 带指令:ng-enter . 我的目标:当用户按下 En
我正在为一家医院创建一个动态表单。我在这里遇到数据自动完成的问题。问题是在将 json 数组更新为 data-autocomplete=' ' 后,它没有更新 data-autocomplete='
我是一名优秀的程序员,十分优秀!