自定义表单输入未绑定到模型 [英] Custom Form Input not binding to model
问题描述
我试图在Angular 4中输入自定义表单输入.这是一个简单的示例,但是我无法使组件绑定到ngModel.我可以从父控制器传递此组件的默认值,但是当我在此输入中更改值时,UI会注册更改,但是控制器中的模型未显示新值.
I am trying to make a custom form input in Angular 4. This is a simple example, but I cannot get the component to bind to the ngModel. I can pass this component a default value from the parent controller, but when I change a value in this input, the UI registers the change, but the model in the controller is not showing the new value.
这是我的自定义组件:
import { Component, Input, forwardRef, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';
@Component({
selector: 'input-test2',
template:
`
<input type="text" class="form-control" placeholder="Symbol" [(ngModel)]="value" [maxlength]="5" >
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTestComponent),
multi: true
},
]
})
export class InputTestComponent implements ControlValueAccessor {
@Input('value') value = false;
private propagateChange = (_: any) => { };
private propagateTouch = (_: any) => { };
writeValue(value: any): void {
if (value) {
this.value = value;
}
}
registerOnChange(fn: (_: any) => void): void {
this.propagateChange = fn;
}
registerOnTouched(fn: () => void): void {
this.propagateTouch = fn;
}
private onChange(event : any) {
this.propagateChange(this.value);
}
该组件的用法:..表格内
And my usage of the component: .. inside a form
< input-test2 id ="coin" name ="coin" [(ngModel)] ="manualEntry.coin"#coin ="ngModel"必需(change)="x($ event)"></input-test2>
有人有一个简单的示例说明如何进行此自定义表单输入吗?我发现的所有示例都很复杂,并且缺少功能.我只希望默认输入type ="text"开头,然后可以添加到此文本.
Does anyone have a simple example of how to do this custom form input? All examples I found are either complex and leave out functionality. I just want a default input type="text" to start with and then I can add to this.
推荐答案
感谢上面的评论.现在按预期工作.这似乎是一个很好的代码段,提供了输入type ="text"的基本实现:
Thanks for the comments above. Now working as expected. This seems to be a good snippet that provides a basic implementation of input type="text":
import { Component, Input, forwardRef} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
selector: 'input-test2',
template:
`
<input type="text" class="form-control" placeholder="Symbol" [(ngModel)]="value" [maxlength]="5" (change)="onChange($event)" [disabled]="isDisabled" >
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTestComponent),
multi: true
},
]
})
export class InputTestComponent implements ControlValueAccessor {
@Input('value') value = false;
private propagateChange = (_: any) => { };
private propagateTouch = (_: any) => { };
private isDisabled: boolean = false;
constructor(){
}
writeValue(value: any): void {
if (value) {
this.value = value;
}
}
registerOnChange(fn: (_: any) => void): void {
this.propagateChange = fn;
}
registerOnTouched(fn: () => void): void {
this.propagateTouch = fn;
}
private onChange(event : any) {
this.propagateChange(this.value);
}
private onTouch(event : any){
this.propagateTouch(event);
}
setDisabledState(isDisabled: boolean): void {
this.isDisabled = isDisabled;
}
}
此组件的用法可以如下形式使用:
And usage of this component can be used in a form like this:
<input-test2
type="text"
id="coin" name="coin"
[(ngModel)]="manualEntry.coin"
#coin="ngModel"
required [disabled]="false"
(change)="test($event)">
</input-test2>
我希望对此有更好的说明,因为我觉得这是在表单中创建自定义/可重用组件的相当普遍的做法.
I wish there were better instructions on this as I feel like this is a fairly common practice to create custom/reusable components in forms.
这篇关于自定义表单输入未绑定到模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!