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

Question

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

时，我需要在选项卡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 指令中触发一个函数。

Answer 1

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

我会在共享服务中创建一个 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
});

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

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

angular

angular2-forms

angular2-directives