[英]Angular Component variables returning undefined
I'm using Angular 10, and i'm havin issues to create a Input Component with ControlValueAccessor.我正在使用 Angular 10,并且在使用 ControlValueAccessor 创建输入组件时遇到问题。
I'm creating public vars and public arrow functions, and when I call the arrow function is returning undefined.我正在创建公共变量和公共箭头函数,当我调用箭头 function 时返回未定义。
Here is my.ts code:这是 my.ts 代码:
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(
() => InputComponent
),
multi: true
}
]
})
export class InputComponent implements ControlValueAccessor {
@Input() public parentForm: FormGroup;
@Input() public fieldName: string;
@Input() public label: string;
public value: string;
public changed: ( value: string ) => void;
public touched: () => void;
public isDisabled: boolean;
get formField (): FormControl {
return this.parentForm?.get( this.fieldName ) as FormControl;
}
constructor () { }
public writeValue ( value: string ): void {
this.value = value;
}
public onChange ( event: Event ): void {
const value: string = (<HTMLInputElement>event.target).value;
this.changed( value );
}
public registerOnChange ( fn: any ): void {
this.changed = fn;
}
public registerOnTouched ( fn: any ): void {
this.touched = fn;
}
public setDisabledState ( isDisabled: boolean ): void {
this.isDisabled = isDisabled;
}
}
And my.html file:还有我的.html 文件:
<div class="form-group">
<label class="form-label" [for]="fieldName">
{{ label }}
</label>
<input
type="text"
class="form-control"
[ngClass]="{ 'has-error': formField?.invalid && formField?.dirty }"
[id]="fieldName"
[name]="fieldName"
[value]="value"
[disabled]="isDisabled"
(input)="onChange( $event )"
(blur)="touched()"
/>
<app-field-errors [formField]="formField">
</app-field-errors>
</div>
When I interact with the Input (change/input or blur) I get this errors:当我与输入交互(更改/输入或模糊)时,我收到此错误:
ERROR TypeError: this.changed is not a function
ERROR TypeError: ctx.touched is not a function
I believe the this.changed error is because I'm calling on onChange function, and ctx.touched is because i'm calling on HTML file.我相信 this.changed 错误是因为我正在调用 onChange function,而 ctx.touched 是因为我正在调用 HTML 文件。
I can access normally the Input() vars, like parentForm, fieldName and label.我可以正常访问 Input() 变量,例如 parentForm、fieldName 和 label。
Thanks for you help.谢谢你的帮助。
Change these lines更改这些行
public changed: ( value: string ) => void;
public touched: () => void;
to至
public changed: any = ( value: string ) => void; // personally I prefer {} rather than void
public touched: any = () => void;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.