Мне нужно написать директиву angular4, которая проверяет условие на входе: если входная строка 'false' => оставить предыдущее записанное значение. Иначе => установить новое значение.

Вот мой снимок:

 import {Directive, ElementRef, HostListener, Input} from '@angular/core';
    import {NgModel} from "@angular/forms";

    @Directive({ selector: '[ngModel][prevVal]'})
    export class PrevValDirective {

      constructor(private el: ElementRef,private model:NgModel) {
      }

      @HostListener('ngModelChange',['$event'])
      onModelChange(event){

        if(event != 'false') {
          this.model.valueAccessor.writeValue(event);
          return true;
        }

        this.model.valueAccessor.writeValue(this.model.value);
        return false;
      }
    }

Но похоже, что onModelChange ловится после того, как модель уже изменилась.

Может ли кто-нибудь помочь? Как я могу отменить изменение, если пользователь вводит «ложь» (или я могу получить предыдущее значение до того, как было введено «ложь»)?

1
ohadinho 28 Май 2017 в 20:24

2 ответа

Лучший ответ

Вы можете попробовать переопределить метод onChange для ControlValueAccessor:

@Directive({ selector: '[ngModel][prevVal]'})
export class PrevValDirective {
  constructor(private valueAccessor: DefaultValueAccessor, private model: NgModel) {
    valueAccessor.registerOnChange = (fn: (val: any) => void) => {
      valueAccessor.onChange = (val) => {
        if(val === 'false') {
          model.control.setValue(model.value);
          return;
        }
        return fn(val);
      };
    }
  }
}

Пример плунжера

Вот картинка, которая описывает, как работает контроль угловой формы.

enter image description here

Я только что сделал несколько хуков, которые не позволяют вызывать onChange (3-4)

0
Community 20 Июн 2020 в 09:12

Попробуйте сохранить предыдущее значение:

@Directive({ selector: '[ngModel][prevVal]'})
export class PrevValDirective {

  constructor(private el: ElementRef,private model:NgModel) {
  }

  private previousValue: any;

  @HostListener('ngModelChange',['$event'])
  onModelChange(event){

    if (event != 'false') {
      this.model.valueAccessor.writeValue(event);
      return true;
    }

    this.model.valueAccessor.writeValue(this.previousValue);

    this.previousValue = event.value;

    return false;
  }
}
0
Chrillewoodz 28 Май 2017 в 17:49