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

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

我有一个details组件，它包含我的表单。我使用*ngSwitchCase和一个用于编辑的指令。另一个组件是buttonsComponent，它基本上包括按钮循环以及隐藏和禁用属性。我的主要逻辑是在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));
    }
  }

按钮：ButtonDef[]=[
{标签：'Edit'，图标类：'fa pen square'，
callbackFn:x=>{
this.editMode=true；
},
visibleFn:x=>！this.editMode，
enabledFn:x=>x.canEdit，
},
{标签：'Save'，图标类：'fa check square'，
callbackFn:x=>{
//console.log（'Save pressed'，x）；
this.editMode=false；
this.hasChanges=false；
常数更新：更新={
id:x.id，
更改：this.details.getUpdatedValues（）
};
this.store.dispatch（新建DocumentActions.Save（更新））；
},
visibleFn:x=>this.editMode，
enabledFn:x=>this.hasChanges
},
{标签：'Cancle'，图标类：'fa undo'，
callbackFn:x=>{
//console.log（'按下重置键'，x）；
this.editMode=false；
},
visibleFn:x=>this.editMode
}
];
编辑模式：布尔；
hasChanges=false；
构造函数（私有只读存储：存储，私有只读api:
应用服务）{
this.documents$=api.getAllDocuments（）；
}
onValueUpdated（事件：布尔值）{
this.hasChanges=事件；
this.btns.update（）；
}
onSelectedId（事件：字符串）{
//console.log（事件）；
如果（事件）{
此.document$=
this.store.pipe（select（DocumentSelectors.getById（event））；
this.store.dispatch（newdocumentactions.Load（event））；
}
}

---

我想禁用保存按钮，直到写入所需字段。

这是所有代码的github链接：这是所有代码的github链接：