Question

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

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

示例：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' }
    }
  }

或使用吸气剂

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

请参阅stackblitz

Answer 2

您想要做的是允许用户提交有效的表格。这就是valid/invalid的{{1}}属性的目的。所以

Form

使用

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

它与数据验证一起很好地工作。

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

按钮验证-Angular 2反应形式

2 个答案: