Javascript 按钮验证-角度2反应形式

我在angular 2项目中使用了被动形式。我试图做按钮验证，但面临着一点困惑。这里我的表单包含几个文本字段和按钮。在我的表格中，有两种方式提供输入。i、 e通过输入文本字段和上传电子表格按钮

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

---

示例：

您要做的是允许用户提交有效的表单。这就是

Form

的

valid/invalid

属性的用途。所以相反

<button class="btn btn-primary" type="submit" [disabled]="SignupForm.dirty" >Submit</button>  

提交

使用

提交

它与数据验证配合得很好

您可以订阅

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' }
    }
  }

或者使用吸气剂

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

---

请参见

stackblitz将非常棒。您最好使用

！SignupForm.valid

用于禁用提交button@MehdiBenmoha是的，我已经试过了，你建议的，但我不认为这对这个特定场景有效。谢谢你的回答，但这不是我所期望的。我的情况不同，我不想提交表格。这里的测试字段和按钮用途不同。若我们使用文本字段，那个么按钮不是必需的，所以需要禁用。若我们删除数据，那个么按钮应该启用。谢谢你们的回答，是的，这很好，但在我的情况下，我的表单中有将近50个文本字段。那么，这是该场景检查每个字段是否为空的正确方法吗？在这种情况下，我将首先在表单中设置一个单选按钮，允许用户选择上载数据或手动填充数据，但这只是一个想法。好的。谢谢您的ans和回复。

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