1.对于React式表单的用法，您可以使用指令

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective implements OnChanges {
  @Input() disableControl = false;

  constructor(private ngControl: NgControl) {}
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['disableControl'] && this.ngControl.control) {
      const action = this.disableControl ? 'disable' : 'enable';
      this.ngControl.control[action]();
    }
  }
}

现在您可以在输入或按钮上使用它

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

1.对于通常的输入，你应该只使用[readonly] -它将是被动的和工作的（见为什么disabled是坏的here的解释）

对于禁用的按钮，您可以使用以下命令：

<button class="btn btn-primary" type="submit" [disabled]="disablebtn" (click)="submit()">Upload</button>

在.ts文件中：

disablebtn:boolean=false;
submit(){
this.disablebtn=true;
}

对于输入字段，您可以使用：

<input type="text" [disabled]="true">

首先：您希望创建一个指令，它以button和input为目标。

@Directive({
  selector: 'input[dis], button[dis]',
})

下一步：您需要了解如何切换按钮/输入的disable状态

this.render.setProperty(
            this.el.nativeElement,
            'disabled',
            true //false
          );

Last：在该指令中，使用permission service切换元素状态，在本例中为disable状态。

this.perService.permission$
      .pipe(
        tap((hasPermission) => {
          //get permission value and set the disable state
          );
        })
      )

您可以在下面的链接中找到完整的工作代码。
Working stackblitz