angular - How to verify if ( this.alertify.error) is a function?

Question

I have some problem when running the app. Basically, it's a registeration section on my program and with the help of alertify, it needs to display some successful or error messages when i press the save button but it doesn't display. In the web console, it tells me that this.alertify.error is not a function when i do not complete the forms but i press save. When i complete the forms and press save, it should displays a successful message, but neither of these is displayed. The code is below. What modification shall i do, in order to display these messages ?

Typescript file

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from 'src/app/model/user';
import { UserServiceService } from 'src/app/services/user-service.service';
import { AlertifyService } from 'src/app/services/alertify.service';


@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.scss']
})
export class UserRegisterComponent implements OnInit {

  registerationForm: FormGroup | undefined;
  user: User | undefined;
  userSubmitted: boolean | undefined;
  constructor(private fb: FormBuilder, private userService: UserServiceService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.createRegistrationForm();
  }

  hasError(str: String)
  {
    return false;
  }

  createRegistrationForm(){
    this.registerationForm = this.fb.group({
      userName: [null, Validators.required],
      email: [null,[Validators.required, Validators.email]],
      password: [null,[Validators.required, Validators.minLength(4)]],
      confirmPassword: [null, [Validators.required]],
      mobile: [null,[Validators.required, Validators.maxLength(4)]]
    });
  }




onSubmit(){
  console.log(this.registerationForm!.value);
  this.userSubmitted = true;
  if(this.registerationForm!.valid){
     //this.user = Object.assign(this.user, this.registerationForm!.value);
     this.userService.addUser(this.userData());
     this.registerationForm!.reset()
     this.userSubmitted = false;
     this.alertify.success("Congrats, you are successfully registered!");
 }else {
  this.alertify.error("Kindly provide the required fields");
 }
}

userData(): User {
  return this.user = {
    userName: this.userName.value,
    email: this.email.value,
    password: this.password.value,
    mobile: this.mobile.value
  }
}

get userName(){
  return this.registerationForm!.get('userName') as FormControl;
}

get password(){
  return this.registerationForm!.get('password') as FormControl;
}

get confirmPassword(){
  return this.registerationForm!.get('confirmPassword') as FormControl;
}

get email(){
  return this.registerationForm!.get('email') as FormControl;
}

get mobile(){
  return this.registerationForm!.get('mobile') as FormControl;
}




}

Service file

import { Injectable } from '@angular/core';
import * as alertyfy from 'alertifyjs';

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

constructor() { }

success(message: string){
  alertyfy.success(message);
}

warning(message: string){
  alertyfy.warning(message);
}

error(message: string){
  alertyfy.error(message);
}

}

Answer 1

等待大神答复