CODEWITHSUNDEEP
angularquillangular5
Matt
Matt

Reputation: 3716

Quill editor not firing for (blur) event in Angular

I'm using Quill editor with the ngx-quill NPM package. Everything is working great except that I just can't get the (blur) event to fire.

Right now, I'm getting it to fire on every text change within the editor. Here's the controller

ngOnInit() {
  this.adminForm.controls['content'].valueChanges.subscribe(data => {
   console.log('Changed Values', data);
  });
}

And here's the HTML:

<quill-editor (change)="validateChange(field)" [formControlName]="field.id" [id]="field.id"></quill-editor>

But of course the (change) event stops firing the moment I move to a different input, and I can't find a way to access the (blur) event. What I really need is an observable that fires when the form field loses focus. I'm using an Angular 5 reactive (dynamic) form.

Thanks for any ideas!!

Upvotes: 2

Views: 4710

Answers (1)

Stefan Morcodeanu
Stefan Morcodeanu

Reputation: 2158

I use quill-editor for comments, and I want on focus to check if user isn't logged in I redirect him on login page, below you have quill-editor component with (onContentChanged)="onContentChanged($event)" event emitter that quill have.

<quill-editor
    theme="bubble"
    [placeholder]="quillConfig.placeholder"
    [modules]="quillConfig.moduleConfig"
    [(ngModel)]="quillData"
    (onContentChanged)="onContentChanged($event)"
    (onSelectionChanged)="onSelectionChanged($event)"
    (onEditorCreated)="getEditorInstance($event)">
</quill-editor>

Now I attached onContentChanged($event) function to (onSelectionChanged) quill eventEmitter, so quill component detecting some changes is calling 

 onContentChanged(event: any) {
    if (!this.userAccount && event.oldRange === null && event.range !== null) {
      this.router.navigate(['/login']);
    }
  }

So you should have same function but checking this conditions

if (range === null && oldRange !== null) {
   //(blur event) occur and do something
}

If you have more question feel free to ask.

Upvotes: 2

Related Questions