在Angular 7中,您可以使用ControlValueAccessor接口来自定义表单控件的双向绑定行为。要将绑定到表单的输入值修剪,您可以创建一个自定义的修剪器指令,并在实现ControlValueAccessor接口的自定义表单控件中使用它。
下面是一个使用ControlValueAccessor和修剪器指令的示例:
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[appTrimValue]'
})
export class TrimValueDirective {
constructor(private ngControl: NgControl) { }
@HostListener('input', ['$event.target.value'])
onInput(value: string) {
this.ngControl.control.setValue(value.trim(), { emitEvent: false });
}
}
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
template: ``,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
value: string;
private onChange: (value: any) => void;
private onTouched: () => void;
writeValue(value: any): void {
this.value = value;
}
registerOnChange(fn: (value: any) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
// implement if needed
}
}
通过这种方式,您可以在输入框中使用appTrimValue指令来修剪输入值,并且自定义表单控件将接收修剪后的值。