如何使用动态按钮验证我的反应形式？

Question

我使用角度反作用形式的动态按钮。我试图使用验证器，以便在输入为空或无效时隐藏或更改按钮。到目前为止，我可以隐藏按钮，当输入不为null时，将编辑更改为保存。但是当它无效时，它仍然可以保存，我不想要那个。

我有一个我的表单所在的detailsComponent。我使用* ngSwitchCase和指令进行编辑。另一个组件是buttonsComponent，它基本上包括按钮的循环以及隐藏和禁用的属性。我的主要逻辑是在app.component中。

这是我的app.component的一部分：

 buttons: ButtonDef[] = [
    { label: 'Edit', iconClass: 'fa-pen-square',
      callbackFn: x => {
        this.editMode = true;
      },
      visibleFn: x => !this.editMode,
      enabledFn: x => x.canEdit,

    },
    { label: 'Save', iconClass: 'fa-check-square',
      callbackFn: x => {
        // console.log('Save pressed', x);
        this.editMode = false;
        this.hasChanges = false;
        const updated: Update<Document> = {
          id: x.id,
          changes: this.details.getUpdatedValues()
        };
        this.store.dispatch(new DocumentActions.Save(updated));
      },
      visibleFn: x => this.editMode,
      enabledFn: x => this.hasChanges
    },
    { label: 'Cancle', iconClass: 'fa-undo',
      callbackFn: x => {
        // console.log('Reset pressed', x);
        this.editMode = false;
      },
      visibleFn: x => this.editMode
    }
  ];

  editMode: boolean;
  hasChanges = false;

  constructor(private readonly store: Store<any>, private readonly api: 
  AppService) {
    this.documents$ = api.getAllDocuments();
  }

  onValueUpdated(event: boolean) {
    this.hasChanges = event;
    this.btns.update();
  }

  onSelectedId(event: string) {
    // console.log(event);
    if (event) {
      this.document$ = 
      this.store.pipe(select(DocumentSelectors.getById(event)));
      this.store.dispatch(new DocumentActions.Load(event));
    }
  }

我要在保存必填字段之前禁用“保存”按钮。