如何在与angular6表单关联的指令内触发函数

Question

嗨当表单获得pristine时，有没有办法在指令内调用函数。这是我需要在表单获取pristine时向选项卡标题添加一个CSS类

<form [formGroup]="awayForm" (ngSubmit)="onSubmit()" awayConfirm [cancelClicked]="cancelClick">
</form>

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

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

当调用markAsPristine时，我需要在awayConfirm指令内触发一个函数。

Answer 1

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

我会在共享服务中创建一个BehaviorSubject<boolean>。然后，当我将next设置为true时，我将调用form方法并将其传递给pristine。我也会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
});