Angular 7 Forms父子组件场景下无法trim文本输入框首尾空格问题

你之前试的两个方案不生效原因很明确：

• ng-trim="true"是AngularJS（Angular 1.x版本）的内置指令，Angular 2及以上版本移除了这个特性，加在标签上没有任何作用。
• 你用的是Angular响应式表单（FormGroup+formControlName的写法），第二个方案混用了模板驱动表单的ngModel做双向绑定，两套表单机制各自维护独立的状态，你写的trim逻辑只改了ngModel绑定的临时变量，根本不会同步到FormGroup里存的orderId值上，提交的时候取到的自然还是带空格的原始值。

根据你的场景选就行，都适配你现在Angular 7.2.10 + 父子组件传FormGroup的架构：

方案1：单字段快速修复 #

如果只需要处理orderId这一个字段，两种写法二选一：

写法A：实时自动trim（用户体验更好） #

在子组件初始化表单后，给对应字段加值变更监听，输入值变化时自动去除首尾空格，修改ngOnInit代码：

ngOnInit() {
    this.orderForm = this.formBuilder.group({
        orderId: [null, Validators.required],
        yourRef: null
    });

    // 监听orderId值变化自动trim
    this.orderForm.get('orderId').valueChanges.subscribe(val => {
        if (typeof val !== 'string') return;
        const trimmedVal = val.trim();
        // 值没变化就不更新，避免触发死循环
        if (trimmedVal !== val) {
            this.orderForm.get('orderId').setValue(trimmedVal, { emitEvent: false });
        }
    })
}

写法B：提交时统一trim #

如果不需要实时处理，只要求提交时值是trim过的，直接改submit方法逻辑：

submit(): void {
    const orderIdControl = this.orderForm.get('orderId');
    // 非空值才做trim，避免null/undefined报错
    if (typeof orderIdControl.value === 'string') {
        orderIdControl.setValue(orderIdControl.value.trim());
    }

    // 原有业务逻辑不变，这里取到的orderId已经是去掉首尾空格的
    let orderId = orderIdControl.value;
    // ... 其他提交逻辑
}

方案2：全局通用指令（推荐多字段场景用） #

如果项目里有大量文本输入框都需要trim，直接写一个通用指令一次配置全局生效，不用每个字段单独写逻辑：

1. 新建trim指令文件：

import { Directive, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
    // 自动匹配所有响应式/模板驱动表单的文本输入框、多行文本框
    selector: `
        input[type="text"][formControlName],
        input[type="text"][ngModel],
        textarea[formControlName],
        textarea[ngModel]
    `
})
export class TrimInputDirective {
    constructor(
        private ngControl: NgControl,
        private elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>
    ) {}

    // 输入框失焦时自动trim
    @HostListener('blur')
    trimValueOnBlur() {
        const control = this.ngControl.control;
        if (!control || typeof control.value !== 'string') return;
        
        const trimmedValue = control.value.trim();
        if (trimmedValue !== control.value) {
            control.setValue(trimmedValue);
            // 同步更新输入框显示内容
            this.elementRef.nativeElement.value = trimmedValue;
        }
    }
}

2. 把这个指令声明到你项目对应的NgModule的declarations数组里，之后所有符合选择器规则的输入框，失焦时都会自动trim首尾空格，你现有代码不用做任何修改就能生效。

内容的提问来源于stack exchange，提问作者code_buddy