Is there a way to detect when the form is reset using a custom Directive in Angular?
I am working with a form that has the following structure:
<form [formGroup]="myForm" (ngSubmit)="onFormSubmit($event)">
<input type="text" formControlName="firstName" myDirective/>
<button id="btnClear" (click)="onReset($event)">Clear</button>
</form>
My Component:
@Component({
selector: 'app-form',
templateUrl: './app-form.component.html',
styleUrls: ['./app-form.component.scss']
})
export class AppSearchFormComponent implements OnInit {
myForm: FormGroup;
constructor(private _fb: FormBuilder, private store: Store<any>) { }
ngOnInit() {
this.createForm();
}
createForm(){
this.myForm = this._fb.group({
'firstName': ['', [Validators.minLength(2)]]
});
}
onReset(evt) {
this.myForm.reset();
}
}
Custom Directive Implementation:
@Directive({
selector: '[myDirective]'
})
export class CustomDirective {
constructor(private el: ElementRef, private control : NgControl) { }
@HostListener('someEvent',['$event'])
onkeyup(event:any){
console.log('The form has been reset!); // Displaying this message
}
}