Angular Значение реактивной трубы формы: проблема с курсором - PullRequest
Новая
       23

Angular Значение реактивной трубы формы: проблема с курсором

0 голосов
/ 22 января 2020

У меня возникают проблемы при попытке применить простую прописную трубу в реактивном виде после обновления с Angular 2,4 до 4.

Старый код использовал это: 

<form [formGroup]="myForm" id="myForm" class="form-horizontal" (ngSubmit)="submit()">
    <textarea pInputTextarea [ngModel]="description | upperx" formControlName="description"
        [rows]="3" class="form-control" autoResize="autoResize" (ngModelChange)="description=$event">
    </textarea>
</form>

Это позволило передать (в верхнем регистре) значение переменной description и установить его в description FormControl формы. Однако после переключения с Angular 2.4 на 4 это вызвало ошибку «Выражение изменилось после того, как оно было проверено», и я изменил его на следующее: 

<form [formGroup]="myForm" id="myForm" class="form-horizontal" (ngSubmit)="submit()">
    <textarea pInputTextarea formControlName="description"
        [rows]="3" class="form-control" autoResize="autoResize">
    </textarea>
</form>

Это решило исключение, но канал теперь пропал , Я попытался применить это решение :

Попытка 1: 

<form [formGroup]="myForm" id="myForm" class="form-horizontal" (ngSubmit)="submit()">
    <textarea pInputTextarea formControlName="description"
        [value] = "myForm.get('description').value | upperx"
        [rows]="3" class="form-control" autoResize="autoResize">
    </textarea>
</form>

Несмотря на то, что это сработало, я вскоре обнаружил, что значение не меняется при размытии, поэтому мой последний символ всегда был строчным. В том же посте они показали другое решение, в котором использовалась подписка valueChanges, которая уже использовалась для проверки, и поэтому я просто добавил логи c для прописных букв:

Попытка 2:

Шаблон 

<form [formGroup]="myForm" id="myForm" class="form-horizontal" (ngSubmit)="submit()">
    <textarea pInputTextarea formControlName="description"
        [rows]="3" class="form-control" autoResize="autoResize">
    </textarea>
</form>

Компонент 

export class PruebasIgtocComponent implements OnInit {
    private myForm: FormGroup;
    constructor(private fb: FormBuilder) {
        this.myForm = this.fb.group({
             'description' : ['', Validators.compose([Validators.required,Validators.maxLength(2000)])],
        });
    }
    ngOnInit() {
        this.myForm.valueChanges.subscribe(data => {
            // Validation logic
            const control = this.myForm.get('description');
            control.patchValue(control.value.toUpperCase(), {emitEvent: false});
        });
    }
}

Это также изменило значение в верхний регистр, даже последний символ (не действительно использовать трубу, являющуюся простым верхним регистром), но после нескольких тестов я обнаружил, что если я что-то изменю в середине текста, курсор сразу же переместится в конец, поэтому мне придется менять один символ за раз , изменяя положение курсора каждый раз.

Несколько прочитанных мной советов, которые могут не сработать в моем случае:

Использование CSS для изменения значения визуально будет работать только с простым регистром, но если значение нужно преобразовать более сложным способом, оно не будет работать.

Использование [(ngModel)] исключено, поскольку согласно это статья из Angular устарела в Angular 6 и удалена из Angular 7 при использовании реактивных форм, и моя цель - иметь возможность обновить проект с Angular 2.4 до последнего (Angular 8).

Итак, есть ли способ разрешить это изменение значения и не получить курсор до go до конца текста? Любые предложения приветствуются!

...