Как я могу вызвать функцию для кнопки, включенной в Angular 8?

Question

Ниже приведен фрагмент файла sign-in.component. html. У меня есть функция в соответствующем файле sign-in.component.ts, которую я хотел бы вызвать при включении кнопки ниже. Пример того, чего я надеюсь достичь:

<div class="button-container">
    <button mat-raised-button [disabled]="!signInForm.valid" (enabled)="callAFunction()" type="submit">Sign in</button>
</div>

Answer 1

В вашей функции ngOnInit подпишитесь на signInForm.valueChanges для вызова callAFunction().

ngOnInit(){
  this.signInForm.valueChanges.subscribe(v => {
    if (this.signInForm.valid) {
      callAFunction();
    }
  })
}

Answer 2

Вы можете сделать это, если callAFunction() ничего не возвращает, это метод, который вы можете использовать:

<div class="button-container">
    <button mat-raised-button [disabled]="!signInForm.valid" type="submit">Sign in</button>
    {{ signInForm.valid ? callAFunction() : '' }}
</div>

если callAFunction() возвращает что-то, вам нужно подписаться на изменение в signInForm . Действителен как:

ngOnInit(){
   this.signInSub = this.signInForm.valueChanges.subscribe(val => {
     this.signedIn.vaild ? callAFunction() : '';  
   });
}
ngOnDestroy(){
   this.signInSub.unsubscribe();
}

Answer 3

Условие для включения кнопки:

signInForm.valid

Итак, я думаю, вы можете добавить

<input type="text" (ngModelChange)="theFunctionYouWantToCallWhenSignInFormIsValid()"/>

С этим, как только ваша форма будет действительной, будет вызвана функция, которую вы хотите вызвать.