按鈕驗證-Angular 2反應形式

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

您要做的是允許用戶提交有效的表格。 這就是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