按钮验证 - Angular 2 反应式表单答案

【问题标题】：Button validation - Angular 2 Reactive forms按钮验证 - Angular 2 反应式表单
【发布时间】：2019-06-28 06:27:15
【问题描述】：

我在我的 Angular 2 项目中使用了反应形式。我正在尝试进行按钮验证，但有点困惑。这里我的表单包含几个文本字段和按钮。在我的表格中，有两种输入方式。即通过输入文本字段和上传电子表格按钮。

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

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

【问题讨论】：

stackblitz 会很棒。
你最好使用!SignupForm.valid来禁用你的提交按钮
@MehdiBenmoha 是的，我已经尝试过您的建议，但我认为这不适用于这种特殊情况。

标签： javascript angular angular-reactive-forms

【解决方案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' }
    }
  }

或使用吸气剂

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

见stackblitz

【讨论】：

感谢您的回答，是的，这工作正常，但在我的情况下，我的表单中有近 50 个文本字段。那么对于那种情况来检查每个字段是否为空，这是正确的方法吗？？
在这种情况下，我将首先在表单中添加一个单选按钮，以允许用户选择上传数据或手动填写数据，但这只是一个想法
哦，好的..非常感谢您的回答和回复。

【解决方案2】：

您想要做的是允许用户提交有效的表单。这就是valid/invalid 的Form 属性的用途。所以改为

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

使用

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

它适用于数据验证。

https://stackblitz.com/edit/angular-cdfj8z?file=src/app/app.component.html

【讨论】：

感谢您的回答，但这不是我所期望的。我的情况不同，我不想提交表单。此处的测试字段和按钮用途不同。如果我们使用使用文本字段，则不需要按钮，因此需要禁用。如果我们删除数据，那么按钮应该启用。