Как определить, что значение основного элемента привязано с помощью директивы angular

#angular #directive

#angular #директива

Вопрос:

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

 @Directive({
  selector: '[testDirective]'
})
export class TestDirective implements AfterViewInit{

    constructor(private el: ElementRef) { }

    @HostListener('change') onChange() {
        this.setCustomAttribute();
    }

    @HostListener('input') inputEvent() {
        console.log("i am in input event");
        //input event is not working either
    }

    private setCustomAttribute(){
        if(this.el.nativeElement.value==null||this.el.nativeElement.value==""){
            this.el.nativeElement.setAttribute("custom-attribute", "false");
        }else{
            this.el.nativeElement.setAttribute("custom-attribute", "true")
        } 
    }
}


<input testDirective name="somefield" required  type="text" [(ngModel)]="object.somefield">

Ответ №1:

вы можете ввести «ngControl» внутри своей директивы, а затем присоединить к valueChanges следующим образом

 @Directive({
  selector: '[testDirective]'
})
export class TestDirective implements AfterViewInit{



      constructor(private el: ElementRef,private ngControl:NgControl) { 
          this.listenToChanges();
          }




    private listenToChanges(){
               this.ngControl.valueChanges.subscribe(()=>{
                this.setCustomAttribute(); })
           }


    @HostListener('change') onChange() {
        this.setCustomAttribute();
    }

    @HostListener('input') inputEvent() {
        console.log("i am in input event");
        //input event is not working either
    }

    private setCustomAttribute(){
        if(this.el.nativeElement.value==null||this.el.nativeElement.value==""){
            this.el.nativeElement.setAttribute("custom-attribute", "false");
        }else{
            this.el.nativeElement.setAttribute("custom-attribute", "true")
        } 
    }
}


<input testDirective name="somefield" required  type="text" [(ngModel)]="object.somefield">

и он автоматически откажется от подписки, в то время как директива будет уничтожена

1. событие ввода не работает, когда данные привязаны к ngModel, я соответствующим образом обновил свой вопрос

2. если у вас есть ngModel, вы можете ввести ngControl в свой конструктор директив и подписаться на событие valueChanges

3. спасибо за ответ, ваше решение работает. Не могли бы вы уточнить свой ответ? на что именно я подписался и должен ли я отказаться от подписки при смене страницы? @onik

Ответ №2:

попробуйте метод ngAfterViewInit

   ngAfterViewInit(): void {
   if(this.el.nativeElement.value==null||this.el.nativeElement.value==""){
        this.el.nativeElement.setAttribute("custom-attribute", "false");
    }else{
        this.el.nativeElement.setAttribute("custom-attribute", "true")
    } 
}