angular 的输入事件和反应 forms

Question

我有一个输入链接到 angular 表单，该表单使用输入事件调用 function 转换为大写并验证仅写入字母和空格，但在表单中最后一个字符始终保留而不转换或替换，即使function 返回正确的值。

<input id="name" type="text" maxlength="60" (input)="funciones.convertOnlyText($event)" pInputText formControlName="name">

convertOnlyText(event) {        
        event.target.value = event.target.value.replace(/[^A-ZÁÉÍÓÚÑ a-záéíóúñ]+/g, '').trimLeft();
        let start = event.target.selectionStart;
        event.target.value = event.target.value.toUpperCase();
        event.target.selectionStart = start;
        event.target.selectionEnd = start;
}

this.form = new FormGroup({
    name: new FormControl({ value: null, disabled: false }, [Validators.required]),    
});

例如，如果我在输入中写 hello*，则 function 返回 HELLO，但形式为 HELLO*，或者如果我只写 hello，则 function 返回 HELLO，但形式为 HELLo。

Answer 1

当您将 formControlName 指令放在输入元素上时，它将在内部实现 DefaultValueAccessor。 DefaultValueAccessor 自动添加输入事件以将值写入 formControl。

这就是表单控件值和 function 返回值不同的原因。为了使表单控件与转换后的值同步，您必须使用setValue或 patchValue 方法手动设置值，如下所示：

尝试这个：

convertOnlyText(event) {        
        event.target.value = event.target.value.replace(/[^A-ZÁÉÍÓÚÑ a-záéíóúñ]+/g, '').trimLeft();
        event.target.value = event.target.value.toUpperCase();
        this.form.get('name').setValue(event.target.value, {emitEvent:false})
}