如何在Angular的textarea中只允许ASCII字符

Question

我是一名有抱负的全栈开发人员，拥有后端经验。我基于 Angular 构建的应用程序有一个允许非 ASCII 字符的文本区域。现在的要求是只允许 ASCII 字符。

我的后端大脑想到了在将数据发送到后端之前使用正则表达式来去除非 ASCII 字符并过滤 ASCII 字符。然而 PO 有一个不同的想法，她希望文本区域中只允许 ASCII 字符，而不是过滤它。

常见的用例是用户从其他文档中复制粘贴备注或信息，同时复制非 ASCII 字符。有没有办法处理这个。我找不到任何开箱即用的 Agular 或 HTML 标签，但我还是前端的初学者。

任何指针表示赞赏。代码如下（class="dialog-panel__content"的div对应文本区）：

<div 
    class="dialog-panel__close"
    aria-label="Close" 
    data-selector="dialog-close"
    *ngIf="showCloseButton" 
    (click)="onClose()">
</div>

<div class="dialog-panel__header">
    <ng-content select="[dialog-header]"></ng-content>
</div>

<div class="dialog-panel__content" [ngClass]="{'scroll':dialog.config.enableScroll}">
    <ng-content></ng-content>
</div>

<div class="dialog-panel__footer">
    <ng-content select="[dialog-footer]"></ng-content>
</div>

组件类代码如下：

从'@angular/core'导入{组件，HostBinding，输入，OnInit}； 从'@core/helpers/dialog/dialog'导入{对话框}；

@Component({
    selector: 'alm-dialog-panel',
    templateUrl: './dialog-panel.component.html',
    styleUrls: ['./dialog-panel.component.scss'],
})
export class DialogPanelComponent implements OnInit {
    @Input() showCloseButton = true;
    @Input() dialog: Dialog<any>;
    @HostBinding('class.large-x-large') largeXlarge: boolean = false;
    @HostBinding('class.medium') medium: boolean = false;
    @HostBinding('class.rectangle') rectangle: boolean = false;
    constructor() {
    }

    ngOnInit() {
        if (!this.dialog) {
            throw new Error('Attribute \'dialog\' is required');
        }
        if (this.dialog.config) {
            this.largeXlarge = this.dialog.config.size === 'large-x-large';
            this.medium = this.dialog.config.size === 'medium';
            this.rectangle = this.dialog.config.size === 'rectangle';
        }
    }

    public onClose(): void {
        this.dialog.close();
    }

}

对话框：

export const APP_DIALOG_DATA = new InjectionToken<any>('AppDialogData');

export class Dialog<T, D = any, R = any> {
    private overlayRef;
    private contentRef;
    private readonly _afterClosed = new Subject<R | undefined>();

    constructor(
        componentType: ComponentType<T>,
        private overlay: Overlay,
        private injector: Injector,
        public  config: DialogConfig<D>,
    ) {
        const positionStrategy = this.overlay.position().global()
            .centerHorizontally().centerVertically();

        const overlayConfig = new OverlayConfig({
            scrollStrategy: this.overlay.scrollStrategies.block(),
            hasBackdrop: config.hasBackdrop,
            positionStrategy,
        });

        this.overlayRef = this.overlay.create(overlayConfig);
        const portal: ComponentPortal<any> = new ComponentPortal(componentType, null, this.createInjector(config.data));
        this.contentRef = this.overlayRef.attach(portal);
    }

    private createInjector(data: any = ''): PortalInjector {
        const injectionTokens = new WeakMap();

        injectionTokens.set(Dialog, this);
        injectionTokens.set(APP_DIALOG_DATA, data);

        return new PortalInjector(this.injector, injectionTokens);
    }

    close(result?: R) {
        this.overlayRef.dispose();
        this._afterClosed.next(result);
        this._afterClosed.complete();
    }

    public get instance(): ComponentType<T> {
        return this.contentRef.instance;
    }

    public get afterClosed(): Observable<R | undefined> {
        return this._afterClosed.asObservable();
    }

}

样式类：

@import 'variables';

$alm-modal-container-bg: white;
$alm-modal-container-color: $alm-color-secondary;
$alm-modal-container-border-top-color: $alm-color-bright-blue;

$alm-modal-color-success: $alm-color-green;
$alm-modal-color-info: $alm-color-bright-blue;
$alm-modal-color-warning: $alm-color-amber;
$alm-modal-color-error: $alm-color-red;

:host {
    display: flex;
    flex-direction: column;
    position: relative;
    background: $alm-modal-container-bg;
    color: $alm-modal-container-color;
    border-top: 4px solid $alm-modal-container-border-top-color;
    max-height: 100%;
    height: auto;
    overflow-y: hidden;


    &.large-x-large {
        width: 98vw;
        height: 95vh;
    }

    &.medium {
        width: 500px;
    }

    &.rectangle {
        height: 85vh;
        width: 900px;
    }

    &.success{
        border-color: $alm-modal-color-success;
    }

    &.error{
        border-color: $alm-modal-color-error;
    }

    &.warning{
        border-color: $alm-modal-color-warning;
    }

    &.info{
        border-color: $alm-modal-color-info;
    }

}
   
.dialog-panel__footer:empty {
    display: none;
}

Answer 1

从用户体验的角度来看，我会说您不应该阻止字符的输入或动态删除字符。如果用户粘贴某些内容，他希望该字段的内容与其剪贴板的内容相同。通常他不会仔细检查它，因为这是预期的行为。

您应该在提交表单之前验证表单的内容，并在任何字段无效时显示信息。常见的做法是例如在无效字段上显示红色轮廓并在其下方显示错误消息。

由于您没有为实际表单提供相关代码，因此很难给您任何进一步的建议 - 您可以在官方文档 here 中进一步了解表单验证。

关于内置方法 - 您可以查看pattern HTML 属性。另外，检查this SO question 以获取正确的正则表达式模式。