Question

我有一个带有文本区域的反应形式trainingFeedbackForm：

<textarea pInputTextarea appWhiteSpace inputField="{{not_attended_reason}}"
    [(ngModel)]="not_attended_reason" [disabled]="attended==='yes'"
    placeholder="The reason for not attending the traning"
    (inputValue)="removeWhitespace($event)"></textarea>

我想在表单有效或文本区域为空时禁用此按钮：

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
    [disabled]="trainingFeedbackForm.invalid || !not_attended_reason">
    Submit feedback
</button>

我上面使用的方法无效。

我该如何实现？有人可以帮忙吗？

Answer 1

component.html在替换disabled="checkDisbled()"

在required中添加<textarea required>

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
                disabled="checkDisbled()">
                Submit feedback
              </button>

添加Component.ts文件

checkDisbled(){
  if(this.trainingFeedbackForm.invalid){ // <- add number of validation
  return true;
  }
  else {
  return false;
  }
}

Answer 2

这应该可以解决问题，只需添加！trainingFeedbackForm.invalid

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
[disabled]="!trainingFeedbackForm.invalid">
Submit feedback
</button>

此外，请确保将.Validators.required添加到.ts中的每个表单中。

根据反应形式或输入状态有条件地禁用按钮

2 个答案: