Question

我有一个链接到一个角形的输入，该输入使用一个输入事件来调用一个转换为大写的函数，并验证仅写字母和空格，但以最后一个字符的形式始终保留而不转换或替换，即使函数返回正确的值。

<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 *，则函数返回HELLO *，但形式为HELLO *，或者如果我只写hello，则函数返回HELLO，但形式为HELLo。 / p>

Answer 1

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

这就是表单控制值和函数返回值不同的原因。为了使表单控制与转换后的值同步，您必须使用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})
}

输入事件和角度的反应形式

1 个答案: