javascript - 按钮验证 - Angular 2 Reactive 表单

Question

我在我的 Angular 2 项目中使用了响应式(Reactive)表单。我正在尝试进行按钮验证，但面临着一些困惑。这里我的表单包含几个文本字段和按钮。在我的表格中，有两种提供输入的方式。即通过输入文本字段和上传电子表格按钮。

如果我们尝试从文本字段提供输入，我的上传按钮应该禁用，如果从文本字段删除数据上传按钮应该启用。如何实现这个功能。

示例:https://stackblitz.com/edit/angular-vnqqcx

Answer 1

您可以订阅

empty=true;
this.SignupForm.controls.userData.valueChanges.subscribe(res=>{
      this.empty=!res.username && !res.email
    })

或者创建一个customValidator并检查组是否有效

  this.SignupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null),
        'email': new FormControl(null),
      }, this.userDataValidator())
    });
  userDataValidator() {
    return (group: FormGroup) => {
      return (!group.value.username && !group.value.email) ? null : 
         { error: 'filled' }
    }
  }

或者使用 setter/getter

  get isEmpty()
  {
    return !this.SignupForm || !this.SignupForm.controls.userData
           || (!this.SignupForm.controls.userData.value.username &&
               !this.SignupForm.controls.userData.value.email)
  }

参见stackblitz