嗨,我遇到了一个非常奇怪的问题,表单组值更改为一个更改订阅了两次. 下面是一些代码片段,它们描述了我正在try 做的事情.不幸的是,由于一些连接,目前无法创建堆栈闪电战. 仅数字-输入组件html文件
<mat-form-field appearance="outline" class="bsl-form-field-input">
<mat-label>{{ matLabel }}</mat-label>
<input
type="number"
matInput
[placeholder]="placeHolder"
[formControl]="formControl"
autocomplete="off"
appNumbersOnly
/>
</mat-form-field>
仅数字-输入元件ts文件
import { Component, Input, OnDestroy, OnInit, forwardRef } from '@angular/core';
import {
FormControl,
NG_VALUE_ACCESSOR,
NumberValueAccessor,
} from '@angular/forms';
import { Subject } from 'rxjs';
@Component({
selector: 'app-numbers-only-input',
templateUrl: './numbers-only-input.component.html',
styleUrls: ['./numbers-only-input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumbersOnlyInputComponent),
multi: true,
},
],
})
export class NumbersOnlyInputComponent
extends NumberValueAccessor
implements OnDestroy, OnInit
{
@Input()
formControl: FormControl;
@Input()
matLabel: string;
@Input()
placeHolder: string;
destroySubject = new Subject<void>();
ngOnDestroy(): void {
this.destroySubject.next();
this.destroySubject.complete();
}
ngOnInit(): void {
this.formControl.valueChanges.subscribe(value=>console.log(value))
}
}
仅数字指令文件,它只是阻止输入除数字之外的任何字符,并仅允许为有效数字粘贴值.
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appNumbersOnly]',
})
export class NumbersOnlyDirective {
regEx = '^[0-9]+$';
// only numbers are allowed
@HostListener('keypress', ['$event'])
onKeyPress(event: KeyboardEvent) {
return new RegExp(this.regEx).test(event.key);
}
// block paste for non numeric values
@HostListener('paste', ['$event'])
onPaste(event: ClipboardEvent) {
const pastedString = event?.clipboardData?.getData('text/plain');
if (pastedString && !Number.isNaN(+pastedString)) {
return true;
} else {
return false;
}
}
}