ngModel не связывает должным образом - PullRequest
Новая
       38

ngModel не связывает должным образом

0 голосов
/ 21 февраля 2019

Я пытаюсь манипулировать значением из ввода, потому что я хочу извлечь из него значение, которое превышает желаемую длину.

В этом примере я хочу сохранить 3 символа и извлечь остальные,Для этого я использовал (ngModelChange) и [ngModel].

html 

<input type="text"
 [ngModel]="value"
 (ngModelChange)="onChange($event)">

ts 

onChange(e: string) {
    if (e.length > 3) {
      this.value= e.substring(0, 3);
      this.input.nativeElement.value = this.value;
    }
  }

Это работает один раз, но если я продолжу изменять ввод, я смогу добавить больше символов, и значение ввода больше не будет обновляться. Почему это происходит?Почему value со входа больше не обновляется?

Я решил использовать nativeElement.Но я все еще хотел бы знать, почему он не работает с [ngModel].

Я скопировал его на stackblitz

Ответы [ 5 ]

0 голосов
/ 21 февраля 2019

Почему это происходит?Почему значение из входных данных больше не обновляется?

Я полагаю, что это связано с обнаружением угловых изменений, когда данные компонента изменяются, и приложение пытается повторно отобразить представление, чтобы отразить это изменение.ngModelChange является источником событий, и в этом случае вы пытаетесь обновить модель непосредственно перед тем, как обнаружение изменений сможет обнаружить и реализовать изменение.В качестве обходного пути можно использовать setTimeout: 

onChange2(e: string) {
  console.warn('E input-2 : ', e);
  if (e.length > 3) {
    setTimeout(()=> {
      this.valor2 = e.substring(0, 3);
    });
    console.log('here 2', this.valor2);
  }
}

Кроме того, вам необходимо использовать двустороннюю привязку [(ngModel)]="valor2" в шаблоне для обновления представления, когда модель обновляется.Здесь stackblitz

0 голосов
/ 21 февраля 2019

Попробуйте посмотреть, используется ли changeDetection: ChangeDetectionStrategy.OnPush в вашем компоненте.Если это правда, используйте метод markForCheck(); для обновления вашего пользовательского интерфейса в.

Например: 

constructor(public cd: ChangeDetectorRef) {}

onChange(e: string) {      
   if (e.length > 3) {
       this.value= e.substring(0, 3);
       this.cd.markForCheck();
   }
}

или попробуйте обнаружить изменения в ngOnInit(): 

ngOnInit() {
  setInterval(() => {
    this.cd.markForCheck();
  }, 3000);
}
0 голосов
/ 21 февраля 2019

поэтому я решил изменить 2 вещи в вашем коде:

  1. [ngModel] на [(ngModel)]
  2. добавил (keyup) привязку

StackBlitz

0 голосов
/ 21 февраля 2019

Как насчет следующего, чтобы достичь того, что вам нужно ...

только один HTML изменить 

<input type="text"
 [(ngModel)]="valor2"
 [maxLength]="3"
 >
0 голосов
/ 21 февраля 2019

Вы также можете использовать реактивные формы, чтобы иметь доступ к valueChanges Observable.Это позволит вам добавить полезные операторы, такие как debounceTime и distinctUntilChanged, которые обеспечивают более богатый пользовательский опыт.

Реактивные формы - valueChanges

...