按钮验证 - Angular 2 响应式表单

Question

我在我的 angular 2 项目中使用了响应式表单。我正在尝试进行按钮验证，但遇到了一些困惑。这里我的表单包含几个文本字段和按钮。在我的表单中，有两种输入方式。即通过输入文本字段和上传传播 sheet 按钮。

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

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

Answer 1

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

<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

Answer 2

您可以订阅

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

或使用 getter

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

见stackblitz

按钮验证 - Angular 2 响应式表单

Button validation - Angular 2 Reactive forms

javascript

angular

angular-reactive-forms