Входные события и реактивные формы angular

Question

У меня есть вход, связанный с формой angular, которая использует событие ввода для вызова функции, которая преобразуется в верхний регистр и проверяет, что записаны только буквы и пробелы, но в форме всегда остается последний символ без преобразования или замена, даже если функция возвращает правильное значение.

<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.

Answer 1

Когда вы размещаете директиву formControlName в элементе ввода, она внутренне реализует DefaultValueAccessor. DefaultValueAccessor автоматически добавляет событие ввода для записи значения в formControl.

Вот почему значение элемента управления формы и возвращаемые значения функции различаются. Чтобы синхронизировать элемент управления c формы с преобразованным значением, вы должны установить значение вручную, используя 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})
}