如何在与 angular6 形式关联的指令内触发函数

How to trigger a function inside a directive associated with angular6 form

您好,当表单变得原始时,有什么方法可以在指令内调用函数。那就是当表单变得原始

时,我需要在选项卡header中添加一个CSSclass
<form [formGroup]="awayForm" (ngSubmit)="onSubmit()" awayConfirm [cancelClicked]="cancelClick">
</form>

这是我的表单 我的表单中有一个 awayConfirm 指令。该指令仅指示选项卡内的表单是脏的(只需添加 CSS class 指示)。现在我需要在表单变得原始时删除 class

    export class AwayConfirmCheckComponent implements OnInit {  
      ......
     onSubmit(){
        this.awayForm.markAsPristine()
     }
    }

调用 markAsPristine 时,我需要在 awayConfirm 指令中触发一个函数。

由于这两个组件之间没有关系,您可以使用共享服务在它们之间传递数据。

我会在共享服务中创建一个 BehaviorSubject<boolean>。然后,当我将此 form 设置为 pristine 时,我将对其调用 next 方法并传递给它 true。我也会 subscribe 到另一个组件中的这个 BehaviorSubject 。调用 next 方法后,我将能够在其他组件中收到有关它的通知。

在共享服务中:

formPristinenessChanged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

在具有表单的组件中:

export class AwayConfirmCheckComponent implements OnInit {
  constructor(private service: SharedService) {}
  ......
  onSubmit() {
    this.awayForm.markAsPristine();
    this.service.formPristinenessChanged.next(true);
  }
}

在其他组件中:

constructor(private service: SharedService) {}

this.service.formPristinenessChanged.subscribe(pristine => {
    if(pristine) // formWasSetToPristine
});