修改表单时以角度启用/禁用按钮

Question

我正在处理一个错误，我想阻止用户保存他没有在表单中输入任何数据的数据。表单是这样创建的：

private buildAddressPopupForm() {
this.form = this.fb.group({
  roles: [''],
  addressLine1: [this.data.addressLine1],
  addressLine2: [this.data.addressLine2],
  city: [this.data.city],
  state: [this.data.state],
  postalCode: [this.data.postalCode],
  country: [this.data.country],
  startDate: [],
  endDate: [],
  isNew: [this.data.isNew],
  phone: [this.data.phone],
  fax: [this.data.fax],
  mobile: [this.data.mobile],
  email: [this.data.email],
  website: [this.data.website],
  active: [this.data.active === undefined ? true : this.data.active],
});

}

我没有应用和取消按钮，它们来自另一个库，所以我覆盖了它们：

createButtons() {
let applyButton = {
  label: "apply",
  id: "apply",
  disabled: true,
  onClick: () => this.onApplyPopup()
}
let cancelButton = {
  label: "cancel",
  id: "cancel",
  disabled: false,
  onClick: () => this.onClosePopup()
}
this.buttons.push(applyButton);
this.buttons.push(cancelButton);

}

onApplyPopup() {
if (this.form.valid) {
  this.applyPopup.emit(this.form.value);
}

}

onClosePopup() {
    this.closePopup.next();
  }

在我点击 Apply 之后，一个事件发射器被发送并且数据被推送到一个数组中。

这 2 个方法：createButtons() 和 buildAddressPopupForm() 在 ngOnInit 中调用，Apply 按钮默认禁用。我希望在更改表单时启用我的按钮，但我不知道如何操作，因为按钮是一次性创建的，而 ngOnInit 仅在创建组件时被调用。我尝试使用事件发射器，但没有得到结果。我们将不胜感激任何帮助，谢谢

Answer 1

试试这个方法！

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: '',
    email: '',
    message: ''
  });

  this.onChanges();
}

    onChanges(): void {
      this.myForm.valueChanges.subscribe(val => {
        //Do your stuff here
    }

Answer 2

您可以使用 FormGroup 的 statusChanges Observable 来实现这一点。

首先，您需要跟踪您的按钮：

createButtons() {
  // create this property in your class
  this.applyButton = {
    label: "apply",
    id: "apply",
    disabled: true,
    onClick: () => this.onApplyPopup()
  }
...
}

然后在你的ngOnInit 中订阅可观察对象并更新按钮的禁用状态：

ngOnInit() {
  this.form.statusChanges.subscribe(status => {
    if (status === 'VALID' && this.form.touched) {
      this.applyButton.disabled = false;
    }
  });
}